jquery使用案例——Datatables.js轻松实现表格常见功能

当需要展示表格时，使用该框架可以大大简化开发，引入dataTables后，只需要将所有数据输出到table并简单初始化，dataTables将帮你良好的实现分页，搜索，排序等。

---

/*
代码片段：使用datatables.js实现用户列表
*/
//引入库文件


...
//jsp部分 表格添加datatable类及拥有了datable表格样式，但没有功能

        

    

    

        
姓名
        
手机号
        
楼号-单元-楼层-房号
        
身份证号
        
查看详细信息
    
    
    

    

            
${cName} 
            
${cTel}
            
${cBuildingNo}-${cUnitNo}-${cFloor}-${cId}
            
${cIdcardNo}
            

                
                    
                
            
        
    
    

//javascript部分
$(document).ready(function() {
    //为`.datables`调用DataTable方法，使其拥有DataTable表格功能
    dataTable = $('.datatable').DataTable({
        //设置参数
        "dom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span12'i><'span10 center'p>>",
        "pagingType": "bootstrap",
        "language": {
            "lengthMenu": "_MENU_ 条记录/页",
            "search"    : "查找 : ",
            "info": "当前显示第 _START_ - _END_ 条/共 _TOTAL_ 条",
            infoEmpty:      "没有记录",
            zeroRecords:    "没有查找到记录",
            infoFiltered: "(查找了 _MAX_ 条记录)",
            "paginate"  : {
                "next": "下一页",
                "previous":"上一页"
            },
            aaSorting:[[0,"desc"]],
            select: {
                rows: "选中 %d 行"
            }
        }
    });
})
//https://datatables.net/examples/basic_init/zero_configuration.html 官网零配置案例

项目效果图