JQuery Datatables 服务端分页简单应用学习

背景介绍

最近在一个简单小项目中碰到需要一个前端数据表格控件，在看了网上的资料后最终选择了JQuery Datatables。Datatables功能及其强大，基本满足我的所有需求，在加上其插件Editor具有inline模式，很多需要直接修改数据的功能不在需再弹出窗口或者模态框进行修改，而是可以直接行内编辑，这对于开发者来说是及其方便的，再加上网上和其官网上有众多关于Datatables使用资料和参考例子，Datatable是首选表格控件之一。关于Datatables的基本功能和Editor inline模式的基本使用会另外介绍，如有兴趣和需要可以去官网上查看其众多的API和资料：Datatables中文网， Datatables官网

服务端分页基本在所有项目中都能用到，一些报表，在数据量不太的情况下，可以配合查询条件减少查询的数据量，Datatables一次性加载出所有数据也是可以的。但是当数据量大的情况下，比如10W行以上的数据Datatables的加载会变得缓慢，这是用户无法接受的，也是我们不希望看到的，这时候就需要服务端分页了，本文会介绍JQuery Datatables 服务端分页简单应用学习，毕竟本人也是菜鸟，如果有写的不多的地方请指正，本文也随着了解的深入和持续更新，大家一起探讨学习共同学习进步~

本文参照博客链接如下：https://blog.csdn.net/shuai_wy/article/details/78196559

https://blog.csdn.net/u011072139/article/details/54312414

本例采用ASP.NET MVC，实现的效果图如下所示：

HTML代码如下所示：

<div class="tab-content" style="margin-top:100px;margin-bottom:10px;"><table id="example" class="table table-bordered hover" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0"></table>
</div>

JS代码如下图所示：

var table;$(document).ready(function () {table = $('#example').DataTable({ajax: function (data, callback, settings) {$.ajax({type: "Post",url: "/Home/ShowData",cache: false, //禁用缓存data: {//组装分页参数"PD.StartIndex": data.start,"PD.PageSize": data.length,"PD.Draw": data.draw,},dataType: "json",success: function (result) {//封装返回数据var returnData = {};returnData.draw = result.Draw;returnData.recordsTotal = result.RecordsTotal;//总记录数returnData.recordsFiltered = result.RecordsFiltered;//后台不实现过滤功能，每次查询均视作全部结果returnData.data = result.Data;//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕callback(returnData);},error: function (error) {alert(error);}})},dom: 'Bfrtip',select: true,//单击行选中颜色凸显,此功能需要select插件serverSide: true,//开启服务端模式pageLength: 10,//每页默认最大显示行数columns: [{ title: "编号", data: "UserID" },{ title: "姓名", data: "UserName" },{ title: "密码", data: "UserPwd" },],"language": {url: dtsLanguage//中文配置文件地址}});   })

Control 代码如下图所示：

public ActionResult ShowData(TextDataTableViewModel vm)
{return Content(vm.GetData());
}

Model 代码如下图所示：

public class TextDataTableViewModel
{public int Draw { get; set; }public PageData PD { get; set; } = new PageData();public string GetData(){using (MyTextDBEntities entity = new MyTextDBEntities()){List<TabUsers> TabUserLists = entity.TabUsers.ToList();this.PD.RecordsFiltered = TabUserLists.Count;this.PD.RecordsTotal = TabUserLists.Count;this.Draw = this.PD.StartIndex / this.PD.PageSize + 1;this.PD.Data = TabUserLists.OrderBy(p => p.UserID).Skip((this.Draw - 1) * this.PD.PageSize).Take(this.PD.PageSize).ToList();string json = Newtonsoft.Json.JsonConvert.SerializeObject(PD);return json;}}}public class PageData
{public int Draw { get; set; }public int StartIndex { get; set; }//查询页第一条数据的行数public int PageSize { get; set; }//每页行数public int RecordsTotal { get; set; }//总条数public int RecordsFiltered { get; set; }//过滤后总条数public List<TabUsers> Data { get; set; }//查询出来的数据}
public partial class TabUsers
{public long UserID { get; set; }public string UserName { get; set; }public string UserPwd { get; set; }
}

注意事项

服务端分页最好配合ORM框架一起使用，如EF、NHIbernate等。
在每次点击页码或者上一页，下一页的时候，Datatables会发送表单数据：格式如下图所示：

这里需要特别注意三个字段：draw、length、start 。length为Datatable中设置的一页的显示的行数，start为查询页的第一条数据在总数据中的行数，如本文截图那一刻查询的是第4页的数据，总共5页，那第四页的第一条数据就是30行。这里需要特别注意下draw这个字段，这个本应该理解为查询页的页码，但事实情况并非如此，每次点击页码或者上一页下一页， draw都会+1，就像一个计数器一样，本文截图时已经点了18次上一页或者下一页了。但是这并没有关系，我们仍然可以通过start这个字段和每页显示的行数来计算出查询的页数，从而在后台查出数据。这里还有一个问题，后台查询出数据返给 Datatable时，不要去修改Datatable 发送过来的draw值，Datatable传过来是18就返回18，否则页面无法刷新数据，也没有报错。这也是为什么Model中要单独定义一个Draw变量用来计算真正的页码，而PageData类中的Draw用来存储Datatable 发送的页面并传回Datatable。

3、返回给Datatable中的字段如JS代码中展示的即可，必须要有这几个字段，不能有大小写错误。如下图所示：

至此为止一个简单的Datatable服务端分页就算完成了。