DataTables分页表格

Datatables 制作分页表格

基本上很多的信息管理页面都需要一个这样的功能，即能够将数据显示在表格中，并能够分页查询。它的实现方式也是多种多样。今天小编给大家介绍一种使用datatables分分钟搞定的简单的方法。
之所以说起简单，并不是功能少，而是人家封装的好啊。对于使用者来说，简直就是直接拿出方法用。

步骤一：
添加样式和js。像小编这样。

<link href="<%=request.getContextPath()%>/css/bootstrap.min.css" rel="stylesheet" />
    <link href="<%=request.getContextPath()%>/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="<%=request.getContextPath()%>/css/jquery.dataTables-itoo.css" rel="stylesheet" />
 <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
 <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.11.2.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>

<!-- datatables JavaScript 文件 -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.dataTables.min.js"></script>

第二步 直接在页面上画一个表格。

    <table id="table_local" class="row-border hover order-column" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th >试卷名称</th>
                <th >分数</th>
                <th >操作人</th>
                <th >操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

别看这页面是简单的不行，连分页的一个按钮都没有看见。别着急，看一眼关键的js部分。

“`
$(document).ready(function() {
var table;
var lastIdx = null;
table=(‘#table_local’).DataTable({

//通过ajax向后台controller请求数据
ajax : {
url : “queryPageAssessResult”,
dataSrc : ” coursedata “,
data : function ( d ) {
var searchContent = $(‘#searchContent’).val();
//添加额外的参数传给服务器
d.extra_search = searchContent;
}
},
//绑定列数据，名字和json串里的key相同，只有这里绑定了表格中才会显示数据
columns : [ {data : ‘templateName’},
{data : ‘score’},
{data : ‘id’}, ],
processing : true, //打开数据加载时的等待效果
serverSide : true,//打开后台分页
ordering : false,//是否启用排序
searching : false,//是否 启用模糊搜索
//当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
deferRender : true,
//国际化设置（设置中文显示）
language : {
lengthMenu : ‘

每页条数：

’
+ ‘option value=”1”>1’
+ ‘option value=”5”>5’
+ ‘option value=”10”>10’
+ ‘option value=”20”>20’
+ ‘option value=”30”>30’
+ ‘option value=”40”>40’
+ ‘option value=”50”>50’
+ ‘/select>

‘,//备注 实际代码中‘前都有”<“符号。左上角的分页大小显示。

search : ‘span class=”label label-success”>搜索：’,
paginate : {//分页的样式内容。
previous : “上一页”,
next : “下一页”,
first : “第一页”,
last : “最后”
},

zeroRecords : “没有内容”,//table tbody内容为空时，tbody的内容。
//下面三者构成了总体的左下角的内容。
info : “共PAGES 页，显示第START 到第 END ，共MAX 条 “,//左下角的信息显示，大写的词为关键字。
infoEmpty : “0条记录”,//筛选为空时左下角的显示。
infoFiltered : “”//筛选之后的左下角筛选提示，
},
paging : true,
pagingType : “full_numbers”//分页样式的类型full_numbers
});

总结说来，主要是dataTables封装的一些属性。我们能从数据源得到相应的数据即可。