DataTable的实践1 前端分页并实现搜索

最近的项目一直在使用 DataTable，走了很多弯路，也踩了很多坑，总结经验，方便后来人。

官方网址 https://datatables.net/
中文资源 http://datatables.club/
 

DataTable 根据分页方式有两种，
第一种方式，从服务器一次性获取全部数据，然后前端DataTable来组织分页和搜索。访问分页和搜索都不再和服务器交互数据，直至当前页面被刷新或重新打开。
第二种方式，服务器做数据分页，并按搜索条件筛选数据，前端通过ajax和服务端交互数据，每次分页或搜索，都是ajax向服务器请求数据后展示。

第一种方式非常适合数据量有限的数据表，否则第一次打开会导致服务端压力很大。
今天我们就详细展示下这种方式如何使用。

//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css

//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js

先引入js和css。  dataTables是jq的扩展 必须要先引入jq这里略过。
smart模板中代码

服务端获取数据后直接赋值给模板变量 $list 无论是几百行还是几千行数据 都直接在模板里面输出。
js代码
 

function get_datatables_obj(){
    return {
        pageLength: 10,   /*每页10行数据*/
        searching: true,  /*是否显示搜索*/
        lengthChange: false,
        bFilter: false,
        autoWidth: false,
        orderMulti: true, //启用多列排序
        order: [], //默认排序查询,否则复选框一列会出现小箭头
        language:{
            "info": "第_PAGE_ 页/共 _PAGES_页  当前显示 _START_ 条到 _END_ 条 共 _TOTAL_ 条",
            'lengthMenu': '每页显示 _MENU_ 记录',
            'zeroRecords': '没有数据 - 抱歉',
            'infoEmpty': '没有符合条件的记录',
            'search': '搜索',
            'infoFiltered': '(从  _MAX_ 条记录中过滤)',
            "paginate": {
                "first": "首页",
                "last": "尾页",
                "next": "下一页",
                "previous": "上一页"
            }
        }
    }
}
$(function() {
	$("#datatables-dashboard-projects").DataTable(get_datatables_obj());
});

注意js代码中的   #datatables-dashboard-projects  要和smart模板中一致;

get_datatables_obj方法中的参数，如果不明白去官网查询。
最重效果

搜索分页都可以使用
搜索是对所有的列进行模糊搜索，分页也不需要服务器准备数据。
这种方式有局限，但是非常适合数据量有限的配置表管理。