jQuery DataTable完整示例（数据获取、分页、样式）

jQuery 的 DataTable 插件，算是我前端项目里用得最多的表格神器了。分页、排序、搜索全都有，接 JSON 数据也方便。你只要配好ajax地址，它就能帮你把数据搞定，响应也快，代码也简单。

数据获取这块，DataTable 支持直接吃JSON，设置下ajax和columns就行，格式清楚明了。像这样：

$('#example').DataTable({
  ajax: 'data.json',
  columns: [
    { data: 'column1' },
    { data: 'column2' }
  ]
});

分页功能也挺实用，默认有“上一页”、“下一页”按钮，你也能自定义每页条数，用pageLength和lengthMenu就搞定：

$('#example').DataTable({
  pageLength: 10,
  lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]]
});

排序支持每列点击切换升降序，你还可以设定自定义排序逻辑，比如：

$('#example').DataTable({
  columns: [
    { title: 'Column 1', orderData: [0, 1] }
  ]
});

搜索功能也蛮强的，自带全局搜索框，你也可以加个自定义列过滤，比如搞个输入框只筛第二列：

$('#search_column2').on('keyup', function() {
  $('#example').DataTable()
    .column(1)
    .search(this.value)
    .draw();
});

样式这块，DataTables 兼容多 UI 框架，像Bootstrap啊、Foundation都行，你也能用自己的 CSS 改外观，比如设置行背景色：

.table.dataTable tbody tr {
  background-color: #f9f9f9;
}

如果你正好要在项目里搞个复杂点的表格展示，DataTable绝对值得一试。压缩包里的Jquery dataTable.zip和DataTables文件应该也准备得比较全，直接跑看看效果更直观。