天行健,君子以自强不息;地势坤,君子以厚德载物;

JQuery Datatables 之 选项

选项

datatables中大量的选项可以用来定制你的表格展现给用户。

设置选项(Setting options)

datatables的配置是通过设置你定义的选项来完成的,如下:

$('#example').DataTable( {
    paging: false
} );

通过设置paging选项,禁止表格分页(默认是打开的)

假设你要在表格里使用滚动,你需要加上scrollY选项:

$('#example').DataTable( {
    scrollY: 400
} );

当然你可以组合多个选项来初始化datatables,启动滚动条,禁用分页

$('#example').DataTable( {
    paging: false,
    scrollY: 400
} );

如果你有其他需要可以加入更多的选项来配置你的表格,更多datatables选项,请参考

常用选项(Common options)

下面列举了一些比较有用的选项:

  • ajax - 异步数据源配置
  • data - javascript数据源配置
  • serverSide - 开启服务器模式
  • columns.data - 配置每一列的数据源
  • scrollX - 水平滚动条
  • scrollY - 垂直滚动条

默认设置(Setting defaults)

在实际项目中,可能需要用到多个表格,你使用dom选项把所有的表格设置为相同的布局,这时你可以使用$.fn.dataTable.defaults 对象处理。

在这个例子中,我们禁用datatable中默认的搜索和排序功能,但当表初始化时启用了排序(重写默认选项)。

// 默认禁用搜索和排序
$.extend( $.fn.dataTable.defaults, {
    searching: false,
    ordering:  false
} );

// 这样初始化,排序将会打开
// 搜索功能仍然是关闭
$('#example').DataTable( {
    ordering: true
} );

http://datatables.net/manual/optionsTranslation from DataTables.net, with permission

点赞

发表回复