您的位置：首页 > 其它

使用datatable进行服务端分页

2015-09-02 17:44 274 查看

分页有两种，一种是前台分页，一种是后台分页，所谓的前台分页就是一次把所有数据查出，然后在前台只展示部分数据，后台分页就是每次只查出特定页的数据，每次翻页时再去数据库查询。前段时间使用了datatable插件进行分页的时候，要用到服务端分页，虽然查到了好多demo，但是用的不明不白的，后面自己看了又看，整理出了一些眉目。

1，前端html代码：

<body style="">
//这一步是导入datatable的插件，我的是下载到了本地，也可以直接引用官网的源文件
<!--
@require "../../common/static/dataTables/core/js/jquery.dataTables.js"
@require "../../common/static/dataTables/core/css/jquery.dataTables.css"
-->
<div class="col-xs-12">
<table class="table table-condensed" id="data_list">
<thead>
<tr>
<th>错误码</th>
<th>错误信息</th>
<th>报错时间</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>

2，js代码：

$(document).ready(function() {  
$('#datas').find('a[data-type="search"]').on('click', function(event) {
<span style="white-space:pre">	</span><pre name="code" class="javascript"><span style="color:#ff0000;"><span style="white-space:pre">	</span>//前台得到的一些参数</span>

// alert(JSON.stringify(aoData));
$.ajax({
"type": "get",
"contentType": "application/json",
"url": sSource,
"data": {<span style="white-space:pre">	</span>//每次请求的参数，有自定义的参数，有分页需要的参数
aoData:JSON.stringify(aoData),
beginDate: beginDate == '' ? '' : beginDate + ' 00:00:00',
endDate: endDate == '' ? '' : endDate + ' 00:00:00'
},
"dataType": "json",//返回的参数类型
"success": function(resp) {
console.info('resp----' + resp.iTotalRecords);
fnCallback(resp);
return false;
}
});
}
});

return false;
});

<span style="font-size:18px;"><span style="white-space:pre">	</span>fnServerData,这个很重要，里面的三个参数名字照写就行了，你可以加个alert，每次换页的时候里面的参数会变化；<span style="font-family: Arial, Helvetica, sans-serif;">sSource其实就是上面的参数</span><span style="font-family: Arial, Helvetica, sans-serif;">sAjaxSource的值，</span><span style="font-family: Arial, Helvetica, sans-serif;">aoData里面保存了与分页有关的参数，最重要的是页数和每页记录数。</span></span>

</pre><pre name="code" class="javascript"><span style="font-size:18px;"><span style="white-space:pre">	</span>现在我们有了分页查询的参数了，接下来就是后台的分页查询了。后台的查询有很多实现方法，但是所有的原理都是一样，根据参数在数据库中查到所需要的数据，然后按特定的格式返回到前台，datatable可以自动帮我们在前台渲染参数，但是前提是你要告诉它它需要的参数。它需要哪些参数呢？首先，分页它要知道总记录数和每页记录数，这样第一次查询后他才知道你得查询一共是多少页啊，其次就是查询本页的数据。下面看几个参数。</span>

<span style="font-size:18px;"></span><pre name="code" class="javascript">var data_ = {
"iTotalRecords": data.iTotalRecords,
"iTotalDisplayRecords":data.iTotalDisplayRecords,
"aaData": data.list
}

<span style="font-size:18px;"></span><pre name="code" class="javascript"><span style="font-size:18px;">iTotalRecords：总记录数</span>

<span style="font-size:18px;">iTotalDisplayRecords：这个我也没搞清楚，我给的值是和总记录数一样</span>

<span style="font-size:18px;">aaData：本次查询的数据</span>

<span style="font-size:18px;"><span style="white-space:pre">
</span></span>

<span style="font-size:18px;">这段代码是用java代码解析aoData的参数的</span><pre name="code" class="java" style="font-size:18px;"><span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="java" style="font-size:18px;"> "iDisplayStart"：表示查询起始记录

<pre name="code" class="java" style="font-size:18px;"> "iDisplayLength"：表示要查询的条数

<span style="font-size:18px;"><span style="white-space:pre"></span></span><pre name="code" class="java">JSONArray jsonarray = JSONArray.fromObject(aoData);
for (int i = 0; i < jsonarray.size(); i++) {
JSONObject obj = (JSONObject) jsonarray.get(i);
if (obj.get("name").equals("iDisplayStart"))
iDisplayStart = (Integer) obj.get("value");
if (obj.get("name").equals("iDisplayLength"))
iDisplayLength = (Integer) obj.get("value");
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航