目录
代码
HTML
...
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap.min.css">
...
<table id="example" class="table table-striped table-bordered" style="width:100%"></table>
...
<script src="./jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap.min.js"></script>
Javascript
$.extend(true, $.fn.dataTable.defaults, {
// "searching": false,
// "ordering": false
});
/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = parseInt($('#min').val(), 10);
var max = parseInt($('#max').val(), 10);
var layer = parseFloat(data[2]) || 0; // use data for the layer
if ((isNaN(min) && isNaN(max)) ||
(isNaN(min) && layer <= max) ||
(min <= layer && isNaN(max)) ||
(min <= layer && layer <= max)) {
return true;
}
return false;
}
);
$(document).ready(function () {
var table = $('#example').DataTable({
destroy: true,
// scrollY: 200,
// scrollX: true,
// scrollCollapse: true,
// paging: false,
pagingType: "full_numbers",
pageLength: 10,
ordering: true,
info: true,
searching: true,
// processing: true,
order: [
[1, 'ase']
],
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
serverSide: true,
ajax: function (data, callback, settings) {
let param = {
}
if (data.order && data.order.length && data.order[0]) {
switch (data.order[0].column) {
case 1:
param.orderColumn = "name";
break;
case 2:
param.orderColumn = "position";
break;
}
//排序方式asc或者desc
param.orderDir = data.order[0].dir;
}
param.pageSize = data.length;
param.pageNum = ~~(data.start / data.length) + 1;
param.search = data["search"]["value"];
$.ajax({
type: 'get',
url: 'data-table.json',
cache: false,
dataType: 'json',
data: JSON.stringify(param),
success: function (response) {
callback(response)
},
error: function (error) {
console.error(error)
}
})
},
columnDefs: [{
targets: [0, 3, 4, 5, 6],
// orderData: [2, 0],
visible: true,
searchable: false,
orderable: false
}],
columns: [{
data: null,
title: ''
},
{
data: 'name',
title: '姓名',
// 存在编辑的文本时，防止xss
render: $.fn.dataTable.render.text()
},
{
data: 'position',
title: '地区',
render: $.fn.dataTable.render.text()
},
{
className: 'test', // used by world-flags-sprite library
data: 'office',
title: '办公地点',
type: 'string',
render: function (data, type, row, meta) {
return data;
}
},
{
data: "start_date",
title: '起始日期',
render: {
"_": "display",
sort: "timestamp",
filter: "timestamp",
// display: "timestamp"
}
},
{
data: "salary",
title: '奖金',
// render: $.fn.dataTable.render.number(',', '.', 2, '$')
},
{
targets: -1,
data: null,
title: '操作',
render: function (data, type) {
return "<button>Click!</button>";
}
}
],
language: {
url: 'Chinese.json'
},
initComplete: function () {
// var api = this.api();
// api.$('td').click(function () {
// // 搜索 seach 参数可以是多个用逗号分开
// api.search(this.innerHTML).draw();
// });
},
createdRow: function (row, data, index) {
if (data.salary.toString().replace(/[\$,]/g, '') * 1 > 15000) {
$('td', row).eq(5).addClass('highlight');
}
}
});
$('#min, #max').keyup(function () {
table.draw();
});
$('#example tbody').on('click', 'button', function () {
var data = table.row($(this).parents('tr')).data();
console.log(data)
alert(data.name + " : " + data.position);
});
// table.search( 'New York' ).draw();
// 列藏列
// var column = table.column(index)
// column.visible(! column.visible())
// 第一列不排序，监听排序搜索重新生成序号 table.on('page.dt order.dt search.dt',function(){}).DataTable()
table.on( 'draw.dt', function () {
var PageInfo = $('#example').DataTable().page.info();
table.column(0, {
page: 'current' }).nodes().each( function (cell, i) {
cell.innerHTML = i + 1 + PageInfo.start;
} );
} );
// 单选行
// $('#example tbody').on( 'click', 'tr', function () {
// if ( $(this).hasClass('selected') ) {
// $(this).removeClass('selected');
// }
// else {
// table.$('tr.selected').removeClass('selected');
// $(this).addClass('selected');
// }
// } );
// $('#button').click( function () {
// table.row('.selected').remove().draw( false );
// } );
// 多行选择
// $('#example tbody').on( 'click', 'tr', function () {
// $(this).toggleClass('selected');
// } );
// $('#button').click( function () {
// alert( table.rows('.selected').data().length +' row(s) selected' );
// } );
// 高亮选中的行列
// $('#example tbody')
// .on( 'mouseenter', 'td', function () {
// var colIdx = table.cell(this).index().column;
// $( table.cells().nodes() ).removeClass( 'highlight' );
// $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
// } );
// 销毁实例
// table.clear()
// table.destroy();
数据格式
draw 属性每次递增1，确保返回的是新的页面，不然当前页面不会重绘
{
"draw": 1,
"recordsTotal": 80,
"recordsFiltered": 80,
"data": [
{
"name": "Paul Lopez",
"position": "浙江省 丽水市",
"salary": 17611,
"start_date": {
"display": "1972-12-09",
"timestamp": "2020-11-09 18:16:43"
},
"office": "内蒙古自治区",
"extn": 1061
}
]
}