项目说明

基于dataTables的样式修改及分页自定义。

使用

引入dataTables的js和css。

再引入当前css文件下的custom-dataTables.css文件以及js文件夹下的pagination-custom.js

配置公共的config，代码如下：

$.extend( $.fn.dataTable.defaults, {
    "scrollX": true,
    "order": [],
    "dom": 'rt<"bottom"ipl>',
    "pageLength": 5,
    "lengthMenu": [ [5, 10, 15], ["5条/页", "10条/页", "15条/页"] ],
    "language": {
        "sLengthMenu":   "_MENU_",
    },
    "pagingType": "custom",
    "infoCallback": function( settings, start, end, max, total, pre ) {
        return '当前第 '+ parseInt(start, 10) +' 到 '+ parseInt(end, 10) +' 条，总共'+ parseInt(total, 10) +'条';
    },
    "headerCallback": function( thead, data, start, end, display ) {
        $(thead).find('th').each(function (i, elem) {
            var $this = $(elem);
            if ($this.find("i").length === 0) {
                var html = $this.html();
                $this.html(html + '<i></i>');
            }
        })
    }
} );

这里可能会根据具体需要，对pageLength和lengthMenu做出调整。

随后就可以愉快地使用了。

$('#example').DataTable( {
    // data: data,
    //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
    //data 这里是固定不变的，name，position，salary，office 为你数据里对应的属性
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'salary' },
        { data: 'office' }
    ],
    scrollY: 300,
    "columnDefs": [
        {
            "targets": [ 0, 1, 2 ],
            "orderable": false
        }
    ]
});

Demo

运行根目录下的index.html即可以看到效果。