I have working datatable. I need to set checkbox checked in modal if in DB my value is 1 and unchecked if value is 0. Also I need to make it working on click. If i Hello all.
I have working datatable. I need to set checkbox checked in modal if in DB my value is 1 and unchecked if value is 0. Also I need to make it working on click. If i fo uncheck i need to update value in my db to 0. Here is my code of table and workign datatable.
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-38304687-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + 'http://.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//JS TO FILL AND BUTTONS
$(document).ready(function() {
// ATW
if ( top.location.href != location.href ) top.location.href = location.href;
// Initialize datatable
$('#example').dataTable({
"aProcessing": true,
"aServerSide": true,
"ajax": "datatable.php?ajax"
});
// Save edited row
$("#edit-form").on("submit", function(event) {
event.preventDefault();
$.post("datatable.php?edit=" + $('#edit-id').val(), $(this).serialize(), function(data) {
var obj = $.parseJSON(data);
var tr = $('a[data-id="row-' + $('#edit-id').val() + '"]').parent().parent();
$('td:eq(1)', tr).html(obj.AD);
$('td:eq(2)', tr).html(obj.SOYAD);
$('td:eq(3)', tr).html(obj.ATAADI);
$('td:eq(4)', tr).html(obj.SHEXSINOM);
$('td:eq(5)', tr).html(obj.SHIRKETNOM);
$('td:eq(6)', tr).html(obj.WHATSAPPNOM);
$('td:eq(7)', tr).html(obj.TABELKOD);
$('td:eq(8)', tr).html(obj.BAL);
$('td:eq(9)', tr).html(obj.VOEN);
$('td:eq(10)', tr).html(obj.SHEXSIYAT);
$('td:eq(11)', tr).html(obj.PRAVA);
$('td:eq(12)', tr).html(obj.MAHKARAYIS);
$('td:eq(13)', tr).html(obj.XIDMETMUQAV);
$('td:eq(14)', tr).html(obj.FOURPIC);
$('td:eq(15)', tr).html(obj.TELIMAT);
$('#edit-modal').modal('hide');
}).fail(function() { alert('Unable to save data, please try again later.'); });
});
// Add new row
$("#add-form").on("submit", function(event) {
event.preventDefault();
$.post("datatable.php?add", $(this).serialize(), function(data) {
var obj = $.parseJSON(data);
$('#example tbody tr:last').after('<tr role="row"><td class="sorting_1">' + obj.id + '</td><td>' + obj.AD + '</td><td>' + obj.SOYAD + '</td><td>' + obj.ATAADI + '</td><td>' + obj.ISHSTARTTIME + '</td><td>' + obj.SHEXSINOM + '</td><td>' + obj.SHIRKETNOM + '</td><td>' + obj.WHATSAPPNOM + '</td><td>' + obj.TABELKOD + '</td><td>' + obj.BAL + '</td><td>' + obj.VOEN ==1 + '</td><td>' + obj.SHEXSIYAT + '</td><td>' + obj.PRAVA + '</td><td>' + obj.MAHKARAYIS + '</td><td>' + obj.XIDMETMUQAV + '</td><td>' + obj.FOURPIC + '</td><td>' + obj.TELIMAT + '</td><td><a data-id="row-' + obj.id + '" href="javascript:editRow(' + obj.id + ');" class="btn btn-default btn-sm">edit</a> <a href="javascript:removeRow(' + obj.id + ');" class="btn btn-default btn-sm">remove</a></td></tr>');
$('#add-modal').modal('hide');
}).fail(function() { alert('Unable to save data, please try again later.'); });
});
});
// Edit row
function editRow(id) {
if ( 'undefined' != typeof id ) {
$.getJSON('datatable.php?edit=' + id, function(obj) {
$('#edit-id').val(obj.id);
$('#firstname').val(obj.AD);
$('#SOYAD').val(obj.SOYAD);
$('#ATAADI').val(obj.ATAADI);
$('#SHEXSINOM').val(obj.SHEXSINOM);
$('#SHIRKETNOM').val(obj.SHIRKETNOM);
$('#WHATSAPPNOM').val(obj.WHATSAPPNOM);
$('#TABELKOD').val(obj.TABELKOD);
$('#BAL').val(obj.BAL);
$('#VOEN').val(obj.VOEN);
$('#SHEXSIYAT').val(obj.SHEXSIYAT);
$('#PRAVA').val(obj.PRAVA);
$('#MAHKARAYIS').val(obj.MAHKARAYIS);
$('#XIDMETMUQAV').val(obj.XIDMETMUQAV);
$('#FOURPIC').val(obj.FOURPIC);
$('#TELIMAT').val(obj.TELIMAT);
$('#edit-modal').modal('show')
}).fail(function() { alert('Unable to fetch data, please try again later.') });
} else alert('Unknown row id.');
}
// Remove row
function removeRow(id) {
if ( 'undefined' != typeof id ) {
$.get('datatable.php?remove=' + id, function() {
$('a[data-id="row-' + id + '"]').parent().parent().remove();
}).fail(function() { alert('Unable to fetch data, please try again later.') });
} else alert('Unknown row id.');
}
<script src="http://ift.tt/1PkWFlm" type="text/javascript"></script>
<script src="http://ift.tt/1jAc4pg" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.js"></script>
<link href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.css" rel="stylesheet"/>
<link href="http://ift.tt/1jAc5cP" rel="stylesheet"/>
<?php
//For more Info: Please visit: http://ift.tt/2mP6sK4
// VARIABLES
$aColumns = array('id', 'AD', 'SOYAD', 'ATAADI', 'SHEXSINOM', 'SHIRKETNOM', 'WHATSAPPNOM', 'TABELKOD');
$sIndexColumn = "id";
$sTable = "";
$gaSql['user'] = "";
$gaSql['password'] = "";
$gaSql['db'] = "";
$gaSql['server'] = "";
// DATABASE CONNECTION
function dbinit(&$gaSql) {
// ERROR HANDLING
function fatal_error($sErrorMessage = '') {
header($_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error');
die($sErrorMessage);
}
// MYSQL CONNECT
if ( !$gaSql['link'] = @mysql_connect($gaSql['server'], $gaSql['user'], $gaSql['password']) ) {
fatal_error('Could not open connection to server');
}
// MYSQL DATABASE SELECT
if ( !mysql_select_db($gaSql['db'], $gaSql['link']) ) {
fatal_error('Could not select database');
}
}
// AJAX EDIT FROM JQUERY
if ( isset($_GET['edit']) && 0 < intval($_GET['edit']) ) {
dbinit($gaSql);
// SAVE DATA
if ( isset($_POST) ) {
$p = $_POST;
foreach ( $p as &$val ) $val = mysql_real_escape_string($val);
if ( !empty($p['firstname']) && !empty($p['SOYAD']) && !empty($p['ATAADI']) )
@mysql_query(" UPDATE $sTable SET AD = '" . $p['firstname'] . "', SOYAD = '" . $p['SOYAD'] . "', ATAADI = '" . $p['ATAADI'] . "', SHEXSINOM = '" . $p['SHEXSINOM'] . "', SHIRKETNOM = '" . $p['SHIRKETNOM '] . "', WHATSAPPNOM = '" . $p['WHATSAPPNOM'] . "', TABELKOD = '" . $p['TABELKOD'] . "', BAL = '" . $p['BAL'] . "', VOEN = '" . $p['VOEN'] . "', BAL = '" . $p['BAL'] . "', SHEXSIYAT = '" . $p['SHEXSIYAT'] . "', PRAVA = '" . $p['PRAVA'] . "', MAHKARAYIS = '" . $p['MAHKARAYIS'] . "', XIDMETMUQAV = '" . $p['XIDMETMUQAV'] . "', FOURPIC = '" . $p['FOURPIC'] . "', TELIMAT = '" . $p['TELIMAT'] . "' WHERE id = " . intval($_GET['edit']));
}
// GET DATA
$query = mysql_query(" SELECT * FROM $sTable WHERE $sIndexColumn = " . intval($_GET['edit']), $gaSql['link']);
die(json_encode(mysql_fetch_assoc($query)));
}
// AJAX ADD FROM JQUERY
if ( isset($_GET['add']) && isset($_POST) ) {
dbinit($gaSql);
$p = $_POST;
foreach ( $p as &$val ) $val = mysql_real_escape_string($val);
if ( !empty($p['firstname']) && !empty($p['SOYAD']) && !empty($p['ATAADI']) ) {
@mysql_query(" INSERT INTO $sTable (AD, SOYAD, ATAADI) VALUES ('" . $p['firstname'] . "', '" . $p['SOYAD'] . "', '" . $p['ATAADI'] . "')");
$id = mysql_insert_id();
$query = mysql_query(" SELECT * FROM $sTable WHERE $sIndexColumn = " . $id, $gaSql['link']);
die(json_encode(mysql_fetch_assoc($query)));
}
}
// AJAX REMOVE FROM JQUERY
if ( isset($_GET['remove']) && 0 < intval($_GET['remove']) ) {
dbinit($gaSql);
// REMOVE DATA
@mysql_query(" DELETE FROM $sTable WHERE id = " . intval($_GET['remove']));
}
// AJAX FROM JQUERY
if ( isset($_GET['ajax']) ) {
dbinit($gaSql);
// QUERY LIMIT
$sLimit = "";
if ( isset($_GET['iDisplayStart']) && $_GET['iDisplayLength'] != '-1' ) {
$sLimit = "LIMIT " . intval($_GET['iDisplayStart']) . ", " . intval($_GET['iDisplayLength']);
}
// QUERY ORDER
$sOrder = "";
if ( isset($_GET['iSortCol_0']) ) {
$sOrder = "ORDER BY ";
for ( $i = 0; $i < intval($_GET['iSortingCols']); $i++ ) {
if ( $_GET['bSortable_' . intval($_GET['iSortCol_' . $i])] == "true" ) {
$sOrder .= $aColumns[intval($_GET['iSortCol_' . $i])] . " " . ( $_GET['sSortDir_' . $i] === 'asc' ? 'asc' : 'desc' ) . ", ";
}
}
$sOrder = substr_replace($sOrder, "", -2);
if ( $sOrder == "ORDER BY" ) $sOrder = "";
}
// QUERY SEARCH
$sWhere = "";
if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" ) {
$sWhere = "WHERE (";
for ( $i = 0; $i < count($aColumns); $i++ ) {
if ( isset($_GET['bSearchable_' . $i]) && $_GET['bSearchable_' . $i] == "true" ) {
$sWhere .= $aColumns[$i] . " LIKE '%" . mysql_real_escape_string($_GET['sSearch']) . "%' OR ";
}
}
$sWhere = substr_replace($sWhere, "", -3);
$sWhere .= ')';
}
// BUILD QUERY
for ( $i = 0; $i < count($aColumns); $i++ ) {
if ( isset($_GET['bSearchable_' . $i]) && $_GET['bSearchable_' . $i] == "true" && $_GET['sSearch_' . $i] != '' ) {
if ( $sWhere == "" ) $sWhere = "WHERE ";
else $sWhere .= " AND ";
$sWhere .= $aColumns[$i] . " LIKE '%" . mysql_real_escape_string($_GET['sSearch_' . $i]) . "%' ";
}
}
// FETCH
$sQuery = " SELECT SQL_CALC_FOUND_ROWS " . str_replace(" , ", " ", implode(", ", $aColumns)) . " FROM $sTable $sWhere $sOrder $sLimit ";
$rResult = mysql_query($sQuery, $gaSql['link']) or fatal_error('MySQL Error: ' . mysql_errno());
$sQuery = " SELECT FOUND_ROWS() ";
$rResultFilterTotal = mysql_query($sQuery, $gaSql['link']) or fatal_error('MySQL Error: ' . mysql_errno());
$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
$iFilteredTotal = $aResultFilterTotal[0];
$sQuery = " SELECT COUNT(" . $sIndexColumn . ") FROM $sTable ";
$rResultTotal = mysql_query($sQuery, $gaSql['link']) or fatal_error('MySQL Error: ' . mysql_errno());
$aResultTotal = mysql_fetch_array($rResultTotal);
$iTotal = $aResultTotal[0];
while ( $aRow = mysql_fetch_array($rResult) ) {
$row = array();
for ( $i = 0 ; $i < count($aColumns); $i++ ) {
if ( $aColumns[$i] == "version" ) $row[] = ( $aRow[$aColumns[$i]] == "0" ) ? '-' : $aRow[$aColumns[$i]];
else if ( $aColumns[$i] != ' ' ) $row[] = $aRow[$aColumns[$i]];
}
$output['aaData'][] = array_merge($row, array('<a data-id="row-' . $row[0] . '" href="javascript:editRow(' . $row[0] . ');" class="btn btn-md btn-success">edit</a> <a href="javascript:removeRow(' . $row[0] . ');" class="btn btn-default btn-md" style="background-color: #c83a2a;border-color: #b33426; color: #ffffff;">remove</a>'));
}
// RETURN IN JSON
die(json_encode($output));
}
?>
<!------------------------ code of table with modal---------------- -->
<div class="container-fluid">
<button type="button" style="padding:10px; margin:0 50px 15px 0;" class="btn btn-primary btn-sm pull-right" data-toggle="modal" data-target="#add-modal"><b>Add More Rows</b></button>
<div class="row">
<div class="col-md-12 marginT20">
<div class="table-responsive demo-x content">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th><p>№</p></th>
<th>AD</th>
<th>Soyad</th>
<th>Ata Adi</th>
<th>Shexsi nomre</th>
<th>Shirket nomre</th>
<th>WhatsApp nomre</th>
<th>Tabel nomre</th>
<!--<th>Ishe Qabul</th>-->
<th style="background-image: none">Edit</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" id="edit-form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="edit-modal-label">Edit selected row</h4>
</div>
<div class="modal-body">
<input type="hidden" id="edit-id" value="" class="hidden">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">AD</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="Firstname" required>
</div>
</div>
<div class="form-group">
<label for="SOYAD" class="col-sm-2 control-label">SOYAD</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="SOYAD" name="SOYAD" placeholder="E-mail address" required>
</div>
</div>
<div class="form-group">
<label for="ATAADI" class="col-sm-2 control-label">ATA ADI</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="ATAADI" name="ATAADI" placeholder="ATA ADI" required>
</div>
</div>
<div class="form-group">
<label for="SHEXSINOM" class="col-sm-2 control-label">Shexsi Nomre</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="SHEXSINOM" name="SHEXSINOM" placeholder="SHEXSI NOMRESI" required>
</div>
</div>
<div class="form-group">
<label for="SHIRKETNOM" class="col-sm-2 control-label">Shirket Nomresi</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="SHIRKETNOM" name="SHIRKETNOM" placeholder="SHIRKET NOMRESI" required>
</div>
</div>
<div class="form-group">
<label for="WHATSAPPNOM" class="col-sm-2 control-label">WHATSAPP NOMRE</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="WHATSAPPNOM" name="WHATSAPPNOM" placeholder="WHATSAPP NOMRE" required>
</div>
</div> <div class="form-group">
<label for="TABELKOD" class="col-sm-2 control-label">TABEL KODU</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="TABELKOD" name="TABELKOD" placeholder="TABEL KODU" required>
</div>
</div> <div class="form-group">
<label for="BAL" class="col-sm-2 control-label">BAL</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="BAL" name="BAL" placeholder="BAL" required>
</div>
</div> <div class="form-group">
<label for="VOEN" class="col-sm-2 control-label">VOEN</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="VOEN" name="VOEN" placeholder="ATAADI" required>
</div>
</div> <div class="form-group">
<label for="SHEXSIYAT" class="col-sm-2 control-label">SHEXSIYAT</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="SHEXSIYAT" name="SHEXSIYAT" placeholder="ATAADI" required>
</div>
</div> <div class="form-group">
<label for="PRAVA" class="col-sm-2 control-label">PRAVA</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="PRAVA" name="PRAVA" placeholder="ATAADI" required>
</div>
</div>
<div class="form-group">
<label for="MAHKARAYIS" class="col-sm-2 control-label">MAHKARAYIS</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="MAHKARAYIS" name="MAHKARAYIS" placeholder="ATAADI" required>
</div>
</div>
<div class="form-group">
<label for="XIDMETMUQAV" class="col-sm-2 control-label">XIDMETMUQAV</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="XIDMETMUQAV" name="XIDMETMUQAV" placeholder="ATAADI" required>
</div>
</div>
<div class="form-group">
<label for="FOURPIC" class="col-sm-2 control-label">FOURPIC</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="FOURPIC" name="FOURPIC" placeholder="ATAADI" required>
</div>
</div>
<div class="form-group">
<label for="TELIMAT" class="col-sm-2 control-label">TELIMAT</label>
<div class="col-sm-10">
<input type="text" id="TELIMAT" name="TELIMAT" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="add-modal" tabindex="-1" role="dialog" aria-labelledby="add-modal-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" id="add-form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-modal-label">Add new row</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">AD</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="add-firstname" name="firstname" placeholder="Firstname" required>
</div>
</div>
<div class="form-group">
<label for="SOYAD" class="col-sm-2 control-label">SOYAD</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="add-SOYAD" name="SOYAD" placeholder="E-mail address" required>
</div>
</div>
<div class="form-group">
<label for="ATAADI" class="col-sm-2 control-label">ATA ADI</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="add-ATAADI" name="ATAADI" placeholder="ATA ADI" required>
</div>
</div>
<div class="form-group">
<label for="SHEXSINOM" class="col-sm-2 control-label">Shexsi Nomre</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="add-SHEXSINOM" name="SHEXSINOM" placeholder="SHEXSI NOMRESI" required>
</div>
</div>
<div class="form-group">
<label for="SHIRKETNOM" class="col-sm-2 control-label">Shirket Nomresi</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="add-SHIRKETNOM" name="SHIRKETNOM" placeholder="SHIRKET NOMRESI" required>
</div>
</div>
<div class="form-group">
<label for="WHATSAPPNOM" class="col-sm-2 control-label">WHATSAPP NOMRE</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="add-WHATSAPPNOM" name="WHATSAPPNOM" placeholder="WHATSAPP NOMRE" required>
</div>
</div> <div class="form-group">
<label for="TABELKOD" class="col-sm-2 control-label">TABEL KODU</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="add-TABELKOD" name="TABELKOD" placeholder="TABEL KODU" required>
</div>
</div> <div class="form-group">
<label for="BAL" class="col-sm-2 control-label">BAL</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="add-BAL" name="BAL" placeholder="BAL" required>
</div>
</div> <div class="form-group">
<label for="VOEN" class="col-sm-2 control-label">VOEN</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="add-VOEN" name="VOEN" placeholder="ATAADI" required>
</div>
</div> <div class="form-group">
<label for="SHEXSIYAT" class="col-sm-2 control-label">SHEXSIYAT</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="add-SHEXSIYAT" name="SHEXSIYAT" placeholder="ATAADI" required>
</div>
</div> <div class="form-group">
<label for="PRAVA" class="col-sm-2 control-label">PRAVA</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="add-PRAVA" name="PRAVA" placeholder="ATAADI" required>
</div>
</div>
<div class="form-group">
<label for="MAHKARAYIS" class="col-sm-2 control-label">MAHKARAYIS</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="add-MAHKARAYIS" name="MAHKARAYIS" placeholder="ATAADI" required>
</div>
</div>
<div class="form-group">
<label for="XIDMETMUQAV" class="col-sm-2 control-label">XIDMETMUQAV</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="add-XIDMETMUQAV" name="XIDMETMUQAV" placeholder="ATAADI" required>
</div>
</div>
<div class="form-group">
<label for="FOURPIC" class="col-sm-2 control-label">FOURPIC</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="add-FOURPIC" name="FOURPIC" placeholder="ATAADI" required>
</div>
</div>
<div class="form-group">
<label for="TELIMAT" class="col-sm-2 control-label">TELIMAT</label>
<div class="col-sm-10">
<input type="checkbox" class="form-control" id="add-TELIMAT" name="TELIMAT" placeholder="ATAADI" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire