淘先锋技术网

首页 1 2 3 4 5 6 7

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 还支持更多更复杂的功能,如分页、查询高级操作、自定义样式等等。但需要注意的是,使用过程中需要注意性能、浏览器兼容性等问题,对于大批量数据的操作,需要结合服务器端技术来提升效率。