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

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

/*
代码片段：使用datatables.js实现用户列表
*/
//引入库文件
<link.../>
<script ...></script>
...
//jsp部分 表格添加datatable类及拥有了datable表格样式，但没有功能
<table class="table table-striped table-bordered bootstrap-datatable datatable">
    <thead>
    <tr>
        <th>姓名</th>
        <th>手机号</th>
        <th>楼号-单元-楼层-房号</th>
        <th>身份证号</th>
        <th>查看详细信息</th>
    </tr>
    </thead>
    <tbody>
    <s:iterator value="ownerInfoList">
        <tr>
            <td>${cName} </td>
            <td>${cTel}</td>
            <td>${cBuildingNo}-${cUnitNo}-${cFloor}-${cId}</td>
            <td>${cIdcardNo}</td>
            <td class="center">
                <a class="btn btn-info" href="${pageContext.request.contextPath}/owner/showOwnerInfoDetail.action?cUserno=${cUserno}&cHouseId=${cHouseId}">
                    <i class="halflings-icon white user"></i>
                </a>
            </td>
        </tr>
    </s:iterator>
    </tbody>
</table>
//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 官网零配置案例

项目效果图