Someone would be so kind to help me with a DataTable , I need to order the table according to the checkbox selected descending, that is if I select a items goes fence showing first as shown in the next example. link
Create the following files:
<html>
<head>
<title>Ordenar por Columnas</title>
<script type="text/javascript" src="ajax.js"></script>
<link href="estilos.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
</head>
<body>
<table class="display" id="example" width="100%" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Phone</th>
<th>City</th>
<th>Zip</th>
<th>Active</th>
</tr>
</thead>
</table>
<!--Script-->
<script type="text/javascript">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajax": "../php/checkbox.php",
"table": "#example",
"fields": [ {
label: "Active:",
name: "active",
type: "checkbox",
separator: "|",
options: [
{ label: '', value: 1 }
]
}, {
label: "First name:",
name: "first_name"
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Phone:",
name: "phone"
}, {
label: "City:",
name: "city"
}, {
label: "Zip:",
name: "zip"
}
]
} );
$('#example').DataTable( {
dom: "Bfrtip",
ajax: "../php/checkbox.php",
columns: [
{ data: "first_name" },
{ data: "last_name" },
{ data: "phone" },
{ data: "city" },
{ data: "zip" },
{
data: "active",
render: function ( data, type, row ) {
if ( type === 'display' ) {
return '<input type="checkbox" class="editor-active">';
}
return data;
},
className: "dt-body-center"
}
],
select: {
style: 'os',
selector: 'td:not(:last-child)' // no row selection on last column
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
],
rowCallback: function ( row, data ) {
// Set the checked state of the checkbox in the table
$('input.editor-active', row).prop( 'checked', data.active == 1 );
}
} );
$('#example').on( 'change', 'input.editor-active', function () {
editor
.edit( $(this).closest('tr'), false )
.set( 'active', $(this).prop( 'checked' ) ? 1 : 0 )
.submit();
} );
} );
</script>
</body>
</html>
Also the file checkbox.php with code ajax to fill the data in the table.
<?php {
"data": [
{
"DT_RowId": "row_1",
"first_name": "Quynn",
"last_name": "Contreras",
"phone": "1-971-977-4681",
"city": "Slidell",
"zip": "81080",
"active": "0"
},
{
"DT_RowId": "row_2",
"first_name": "Kaitlin",
"last_name": "Smith",
"phone": "1-436-523-6103",
"city": "Orlando",
"zip": "U5G 7J3",
"active": "1"
},
{
"DT_RowId": "row_3",
"first_name": "Cruz",
"last_name": "Reynolds",
"phone": "1-776-102-6352",
"city": "Lynn",
"zip": "EJ89 9DQ",
"active": "0"
}
I do the example that they indicate me there but it does not work for me, what should I do?