dataTables.js分页演示支持排序，过滤-freejs.net代码演示

首页>>分页>>dataTables.js分页演示支持排序，过滤(2019-05-02)

dataTables.js分页演示支持排序，过滤

XML/HTML Code

<div class="container">
<table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
<thead>
<tr>
<th>演示名称</th>
<th>简介</th>
<th>点击次数</th>
</tr>
</thead>
<thead>
<tr>
<td><input type="text" data-column="0" class="search-input-text"></td>
<th><input type="text" data-column="1" class="search-input-text"></td>
<td>
<select data-column="2" class="search-input-select">
<option value="">(Select a range)</option>
<option value="1-100">1-100</option>
<option value="101-1000">101-1000</option>
<option value="1001-1000000">1001+</option>
</select>
</td>
</tr>
</thead>
</table>
</div>

JavaScript Code

<script type="text/javascript" language="javascript" >
$(document).ready(function() {
var dataTable = $('#employee-grid').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"employee-grid-data.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".employee-grid-error").html("");
$("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#employee-grid_processing").css("display","none");
}
}
} );
$("#employee-grid_filter").css("display","none"); // hiding global search box
$('.search-input-text').on( 'keyup click', function () { // for text boxes
var i =$(this).attr('data-column'); // getting column index
var v =$(this).val(); // getting search input value
dataTable.columns(i).search(v).draw();
} );
$('.search-input-select').on( 'change', function () { // for select box
var i =$(this).attr('data-column');
var v =$(this).val();
dataTable.columns(i).search(v).draw();
} );
} );
</script>