使用datatable进行服务端分页

最新推荐文章于 2024-04-01 17:44:33 发布

原创最新推荐文章于 2024-04-01 17:44:33 发布 · 2.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#datatable #后台分页

本文介绍了前端分页与后台分页的区别，并详细讲述了如何使用datatable插件进行服务端分页。通过实例演示了前端html代码和js代码的配置，帮助读者清晰理解并实现datatable的服务端分页功能。

分页有两种，一种是前台分页，一种是后台分页，所谓的前台分页就是一次把所有数据查出，然后在前台只展示部分数据，后台分页就是每次只查出特定页的数据，每次翻页时再去数据库查询。前段时间使用了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");
}