Jquery DataTable 是一种常用的数据表格插件,通过JS代码的调用可以快速展示大量数据并且支持各种交互操作。以下是一些基础功能的实现方法:
//创建DataTable对象
var table = $('#myTable').DataTable( {
//设置数据源URL
"ajax": "data.json",
//设置列
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
]
});
//排序操作
$('#myTable thead th').each( function () {
var title = $(this).text();
$(this).html( title+'
' );
} );
//Filter
table.columns().every( function () {
var that = this;
$( 'input', this.header() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that.search( this.value ).draw();
}
} );
} );
//添加新数据
$('#addButton').on('click', function(){
table.row.add( [ 'New Data 1', 'New Data 2', 'New Data 3', 'New Data 4' ] ).draw();
});
//删除选中数据
$('#deleteButton').on('click', function(){
table.row('.selected').remove().draw( false );
});
以上是一些基础的操作,Jquery DataTable 还支持更多更复杂的功能,如分页、查询高级操作、自定义样式等等。但需要注意的是,使用过程中需要注意性能、浏览器兼容性等问题,对于大批量数据的操作,需要结合服务器端技术来提升效率。