,,jQuery插件DataTable使用方法详解(.Net平台)

,,jQuery插件DataTable使用方法详解(.Net平台)

public IQueryableUserInfo getiqueryablebysearch page(int pageIndex,int pageSize,out int total,string nickname)

{

IQueryableUserInfo userInfoIq=current dal。GetIQueryable();

如果(!字符串。IsNullOrEmpty(昵称))

{

userInfoIq=userInfoIq。其中(a=a . nickname . contains(nickname));

}

total=userInfoIq。count();

userInfoIq=userInfoIq。OrderByDescending(a=a . add time);

userInfoIq=userInfoIq。Skip((pageIndex - 1)*pageSize)。take(pageSize);//分页前排序,否则EF会报错。

返回userInfoIq

}

使用系统;

使用系统。收藏;

使用系统。集合。泛型;

使用系统。Linq

使用系统。文本;

命名空间视图模型

{

///摘要

///jQuery数据表插件交互的DT格式数据(DT参数区分大小写)

////摘要

公共类数据表

{

///摘要

///请求数(前端==后端)

////摘要

public int draw { get设置;}

///摘要

///记录总数(前端==后端)

////摘要

public int recordsTotal { get设置;}

///摘要

///筛选出的记录总数(前端==后端)

////摘要

public int recordsFiltered { get设置;}

///摘要

///记录开始索引(前端==后端)

////摘要

public int start { get设置;}

///摘要

///PageIndex(前端==后端)

////摘要

public int pageIndex { get设置;}

///摘要

///PageSize(前端==后端)

////摘要

public int length { get设置;}

///摘要

///设置分页数据(前端==后端)

////摘要

公共IList数据{ get设置;}

}

}

就是这样。是不是很简单(~()~)

( _ ) 好吧,让我解释一下。

一.使用DT,需要以下支持

首先我们的表只给出了thead部分,那么tbody部分呢?留给DT去完成,DT来管。那我们先初始化DT。js会调用initializeTable()方法,其中$('#table1 ')。调用了DataTable({各种配置});配置DT。至于这些配置的功能,我已经在我的代码里做了注释。详细的配置说明,可以查看官网文档。

配置中有一项非常重要,就是ajax配置项。这是数据源的配置项。数据来源有很多种。我在这里选择了ajax异步请求数据源。

二、页面上进行引入js,直接使用DT功能'/userinfo/manager/search '这是用DT请求数据配置的url地址。

前端代码:“post”表示请求通过邮寄发送。

后端代码:

函数(数据){

//向服务器添加附加数据

data . page index=(data . start/data . length)1;

data.nickname=$('#nickname ')。val()。trim();

}

因为我使用搜索功能,所以每次请求数据时,我都要将搜索条件作为附加数据发送给服务器。

最后,小心加上‘server side’:真的,因为我们的数据都是后台的,不是前台的静态数据。你要打开“服务器模式”,这样你每次对表单的操作,都会变成一个请求,一次又一次的发送给服务器。

前台:

后台负责提供数据源,并使用自定义的DataTable类作为格式化数据进行交互。当然,这里的DataTable类不是必须的。你只需要满足前后数据交互的格式。为了方便起见,这里将其封装为一个类。

DT建议我们交互的数据格式至少要包含以下几项,我用匿名类来表示(区分大小写):

新建{

draw=***,

recordsTotal=***,

recordsFiltered=***,

数据=***,

}

其他项目,可以根据自己的实际情况添加。

数据准备好之后,Json将数据序列化并返回到前端。

效果图:

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用jquery实现图片轮播效果如何,jQuery图片轮播
  • 使用jquery实现图片轮播效果如何,jQuery图片轮播,使用jQuery实现图片轮播效果
  • 举例说明jquery中each函数的使用,jquery each()
  • 举例说明jquery中each函数的使用,jquery each(),JQuery中each()的使用方法说明
  • 一篇文章带你了解jquery动画人物,一篇文章带你了解jquery动画制作
  • 一篇文章带你了解jquery动画人物,jquery的动画,一篇文章带你了解jQuery动画
  • trigger的用法总结,jquery trigger 传参数
  • trigger的用法总结,jquery trigger 传参数,jQuery中值得注意的trigger方法浅析
  • js hover 触发事件显示另一元素,js hover 触发事件,jQuery中多个元素的Hover事件解决方案
  • js apply 实现原理,jquery apply用法_1
  • js apply 实现原理,jquery apply用法
  • js apply 实现原理,jquery apply用法,js中apply方法的使用详细解析
  • js apply 实现原理,jquery apply用法,JS中apply()的应用实例分析
  • jq获取radio选中的值,jquery radio 取值
  • jq获取radio选中的值,jquery radio 取值,Jquery获取radio选中值实例总结
  • 留言与评论(共有 条评论)
       
    验证码: