做网站l价格,西宁微网站建设多少钱,建设网站北京,做网站开发公司背景介绍 最近在一个简单小项目中碰到需要一个前端数据表格控件#xff0c;在看了网上的资料后最终选择了JQuery Datatables。Datatables功能及其强大#xff0c;基本满足我的所有需求#xff0c;在加上其插件Editor具有inline模式#xff0c;很多需要直接修改数据的功能不… 背景介绍 最近在一个简单小项目中碰到需要一个前端数据表格控件在看了网上的资料后最终选择了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 classtab-content stylemargin-top:100px;margin-bottom:10px;table idexample classtable table-bordered hover stylewhite-space: nowrap;width:100%;cursor:pointer cellspacing0/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()){ListTabUsers 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 ListTabUsers 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服务端分页就算完成了。
