实现dataTable服务端分页
在上一篇文章中介绍了客户端分页的使用(https://blog.youkuaiyun.com/qq_38403662/article/details/85066142),这里介绍一下服务端分页的使用。
什么是服务器模式?
是不是发现在处理太多 DOM 数据或者 AJAX 一次性把数据获得后,DataTables 表现的不是很满意?这是肯定的, 因为 DT 需要渲染,创建 tr/td ,所以数据越多,速度就越慢。 为了解决这个问题 DataTables 提供了 服务器模式,把本来客户端所做的事情交给服务器去处理, 比如排序(order)、分页(paging)、过滤(filter)。对于客户端来说这些操作都是比较消耗资源的, 所以打开服务器模式后不用担心这些操作会影响到用户体验。
当你打开服务器模式的时候,每次绘制表格的时候,DataTables 会给服务器发送一个请求(包括当前分页,排序,搜索参数等等)。DataTables 会向 服务器发送 一些参数 去执行所需要的处理,然后在服务器组装好 相应的数据 返回给 DataTables。
页面代码
省略插件导入代码~
首先页面
页面部分需要写的只是一个table标签,可根据自己的需求加上相应的样式和布局
<!-- 搜索条件 可省略~~~2333主要是JS代码 -->
<div class="content">
<div class="content-panel">
<div class="row">
<form id="form_condition">
<div class="row">
<div class="col-lg-6 form-group">
<label>姓名</label>
<input type="text" name="name" class="form-control"/>
</div>
<div class="col-lg-6 form-group">
<label>驾驶证编号</label>
<input type="text" name="driverCard" class="form-control"/>
</div>
</div>
<div class="row">
<div class="col-lg-6 form-group">
<label>性别</label>
<select name="sex" class="form-control">
<option value="">全部</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div class="col-lg-6 form-group">
<label>手机号</label>
<input type