本实例引用Datatable版本号: 1.10.16

一、传到aspx后台(webmethod)

1、添加js、css引用:

    <link href="/Scripts/ThirdLibs/DataTables/jquery.dataTables.min.css" rel="stylesheet" />
<script src="/Scripts/ThirdLibs/DataTables/jquery.dataTables.min.js"></script>

 2、前台代码:

<div style="padding: 10px;">
<input type="text" id="nickname" class="form-control" />
<input type="button" value="搜索" id="search" class="btn btn-primary" />
</div> <table id="tbSubscirptionReport" class="table table-hover table-striped table-bordered table-choose single-check">
<thead>
<tr>
<th style="width: 5%">序号</th>
<th style="width: 15%">表单号</th>
<th style="width: 20%">资源名称</th>
<th style="width: 10%">资源类型</th>
<th style="width: 10%">审批状态</th>
<th style="width: 10%">申请人姓名</th>
<th style="width: 15%">申请时间</th>
<th style="width: 15%">操作</th>
</tr>
</thead> </table> <%--js脚本--%>
<script> var myTable;
$(function () {
myTable = initializeTable(); $("#search").click(function () {
reloadTable();
});
}); function initializeTable() { var dutyTable = $("#tbTestReport").dataTable({
/****************************************表格数据加载****************************************************/
"serverSide": true,
"ajax": function (data, callback, settings) {
//封装请求参数
var param = {};
param.draw = data.draw;
param.length = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候
param.start = data.start;//开始的记录序号
param.pageIndex = (data.start / data.length) + 1;//当前页码
param.search = $("#searchStr").val();
//ajax请求数据
$.ajax({
type: "post",
//url: "/ajaxpage/testdatatablehandler.ashx?cmd=getTestData",
url: "testdatatable.aspx/test",
contentType: "application/json;charset=utf-8",//设置内容类型,即在页面中传递的方式及编码方式
cache: false, //禁用缓存
data: JSON.stringify({ data: param }), //传入组装的参数
dataType: "json",
success: function (resultData) {
var result = JSON.parse(resultData.d);
//setTimeout仅为测试延迟效果
setTimeout(function () {
//封装返回数据
var returnData = {};
returnData.draw = result.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = result.recordsTotal;//返回数据全部记录
returnData.recordsFiltered = result.recordsFiltered;//后台不实现过滤功能,每次查询均视作全部结果
returnData.data = result.data;//返回的数据列表 //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
callback(returnData);
}, 200);
}
});
}, "columns": [//列绑定
{ "序号": "" },
{ "data": "ApplyNumber" },
{ "data": "ResourceName" },
{ "data": "ResourceType" },
{ "data": "ApprovalStatus" },
{ "data": "ApplicantName" },
{ "data": "CreateTime" },
{ "操作": "" }
],
"columnDefs": [//列定义
{
"targets": [0],
"data": "ID",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
//return "<input type='checkbox' value='" + data + "' name='DataID'>";
return "";
}
},
{
"targets": [6],
"data": "CreateTime",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
if (data == null || data.trim() == "") { return ""; }
else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate(); }
}
},
{
"targets": [7],
"data": "ID",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
return "<a style='text-decoration:none' class='btn btn-info' onclick=article_edit('资讯编辑','article-add.html','" + data + "') href='javascript:;' title='编辑'><i class='Hui-iconfont'>编辑</i></a>" +
" <a style='text-decoration:none' class='btn btn-info' onclick=article_del(this,'" + data + "') href='javascript:;' title='删除'><i class='Hui-iconfont'>删除</i></a>";
}
}, { "orderable": false, "targets": [0, 7] },// 是否排序
//{ "visible": false, "targets": [3, 5] }//是否可见
],
"rowCallback": function (row, data, displayIndex) {//行定义
$(row).attr("class", "text-c"); },
"drawCallback": function (settings, json) { //每次画完后调用 var startIndex = this.api().context[0]._iDisplayStart;//获取到本页开始的条数
this.api().column(0).nodes().each(function (cell, i) {
//翻页序号连续
cell.innerHTML = startIndex + i + 1;
});
},
/****************************************表格数据加载****************************************************/
/****************************************表格样式控制****************************************************/
"dom": "t<'dataTables_info'il>p",//表格布局
"language": {//语言国际化
"lengthMenu": "每页 _MENU_ 条",
"zeroRecords": "没有找到记录",
"info": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_条",
"infoEmpty": "无记录",
"paginate":
{
"first": "首页",
"previous": "前一页",
"next": "后一页",
"last": "末页"
}
},
"pagingType": "full_numbers",//分页格式
"processing": true,//等待加载效果
"ordering": false,//排序功能
/****************************************表格样式控制****************************************************/
}); return dutyTable;
}
//当你需要多条件查询,你可以调用此方法,动态修改参数传给服务器
function reloadTable() {
var oSettings = myTable.fnSettings();
myTable.fnClearTable(0);
myTable.fnDraw();
}
</script>

 3、后台代码(aspx)

 [WebMethod]
public static string Test(TestDataTable data) { #region ===代码===
int totalCount = ;//所有的
//int selCount = 0;//根据条件搜索到的 System.Linq.Expressions.Expression<Func<ResourceApply, Boolean>> p = a => true;
if (!string.IsNullOrEmpty(data.search))
{
p = a => a.ResourceName.ToUpper().Contains(data.search.ToUpper());
} var list = new ResourceApplyService().GenericService.GetListByPage(data.length, data.pageIndex, out totalCount, p, a => a.CreateTime, true).ToList();
data.recordsFiltered = totalCount;
data.recordsTotal = totalCount;
data.data = list; JavaScriptSerializer jss = new JavaScriptSerializer();
return jss.Serialize(data);
#endregion ===代码=== }

 4、 Model TestDataTable

   /// <summary>
/// JqueryDataTable插件交互的DT格式的数据(DT参数区分大小写)
/// </summary>
public class TestDataTable
{
/// <summary>
/// 请求次数(前端==》后端)
/// </summary>
public int draw { get; set; } /// <summary>
/// 总记录数(前端《==后端)
/// </summary>
public int recordsTotal { get; set; } /// <summary>
/// 过滤后的总记录数(前端《==后端)
/// </summary>
public int recordsFiltered { get; set; } /// <summary>
/// 记录开始索引(前端==》后端)
/// </summary>
public int start { get; set; } /// <summary>
/// PageIndex(前端==》后端)
/// </summary>
public int pageIndex { get; set; } /// <summary>
/// PageSize(前端==》后端)
/// </summary>
public int length { get; set; }
public string search { get; set; }
/// <summary>
/// 集合分页数据(前端《==后端)
/// </summary>
public System.Collections.IList data { get; set; }
}

二、ashx 版

1、前端代码:

其他都一样,js略有不同

     <%--js脚本--%>
<script> var myTable;
$(function () {
myTable = initializeTable(); $("#search").click(function () {
reloadTable();
});
}); function initializeTable() { var dutyTable = $("#tbTestReport").dataTable({
/****************************************表格数据加载****************************************************/
"serverSide": true,
"ajax": function (data, callback, settings) {
//封装请求参数
var param = {};
param.draw = data.draw;
param.length = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候
param.start = data.start;//开始的记录序号
param.pageIndex = (data.start / data.length) + 1;//当前页码
param.search = $("#searchStr").val();
//ajax请求数据
$.ajax({
type: "post",
url: "/ajaxpage/testdatatablehandler.ashx?cmd=getTestData",
//url: "testdatatable.aspx/test",
//contentType: "application/json;charset=utf-8",//设置内容类型,即在页面中传递的方式及编码方式
cache: false, //禁用缓存
data: { "data": JSON.stringify( param)}, //传入组装的参数
dataType: "json",
success: function (result) {
//var result = JSON.parse(resultData.d);
//setTimeout仅为测试延迟效果
setTimeout(function () {
//封装返回数据
var returnData = {};
returnData.draw = result.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = result.recordsTotal;//返回数据全部记录
returnData.recordsFiltered = result.recordsFiltered;//后台不实现过滤功能,每次查询均视作全部结果
returnData.data = result.data;//返回的数据列表 //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
callback(returnData);
}, 200);
}
});
}, "columns": [//列绑定
{ "序号": "" },
{ "data": "ApplyNumber" },
{ "data": "ResourceName" },
{ "data": "ResourceType" },
{ "data": "ApprovalStatus" },
{ "data": "ApplicantName" },
{ "data": "CreateTime" },
{ "操作": "" }
],
"columnDefs": [//列定义
{
"targets": [0],
"data": "ID",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
//return "<input type='checkbox' value='" + data + "' name='DataID'>";
return "";
}
},
{
"targets": [6],
"data": "CreateTime",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
if (data == null || data.trim() == "") { return ""; }
else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate(); }
}
},
{
"targets": [7],
"data": "ID",
"render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
return "<a style='text-decoration:none' class='btn btn-info' onclick=article_edit('资讯编辑','article-add.html','" + data + "') href='javascript:;' title='编辑'><i class='Hui-iconfont'>编辑</i></a>" +
"&nbsp;<a style='text-decoration:none' class='btn btn-info' onclick=article_del(this,'" + data + "') href='javascript:;' title='删除'><i class='Hui-iconfont'>删除</i></a>";
}
}, { "orderable": false, "targets": [0, 7] },// 是否排序
//{ "visible": false, "targets": [3, 5] }//是否可见
],
"rowCallback": function (row, data, displayIndex) {//行定义
$(row).attr("class", "text-c"); },
"drawCallback": function (settings, json) { //每次画完后调用 var startIndex = this.api().context[0]._iDisplayStart;//获取到本页开始的条数
this.api().column(0).nodes().each(function (cell, i) {
//翻页序号连续
cell.innerHTML = startIndex + i + 1;
});
},
/****************************************表格数据加载****************************************************/
/****************************************表格样式控制****************************************************/
"dom": "t<'dataTables_info'il>p",//表格布局
"language": {//语言国际化
"lengthMenu": "每页 _MENU_ 条",
"zeroRecords": "没有找到记录",
"info": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_条",
"infoEmpty": "无记录",
"paginate":
{
"first": "首页",
"previous": "前一页",
"next": "后一页",
"last": "末页"
}
},
"pagingType": "full_numbers",//分页格式
"processing": true,//等待加载效果
"ordering": false,//排序功能
/****************************************表格样式控制****************************************************/
}); return dutyTable;
}
//当你需要多条件查询,你可以调用此方法,动态修改参数传给服务器
function reloadTable() {
var oSettings = myTable.fnSettings();
myTable.fnClearTable(0);
myTable.fnDraw();
}
</script>

2、后台代码:

 string json = "";
HttpContext context;
JavaScriptSerializer jss = new JavaScriptSerializer();
Dictionary<string, object> dic = new Dictionary<string, object>();
public void ProcessRequest(HttpContext context)
{
this.context = context;
context.Response.ContentEncoding = Encoding.GetEncoding("utf-8");//避免出现乱码
//接收浏览器 get/post 过来的参数cmd
string cmd = context.Request["cmd"].ToString();
switch (cmd)
{
case "getTestData":
json = GetUserList();
break;
}
context.Response.Write(json);
}
/// <summary>
/// 获得用户列表
/// </summary>
/// <param name="index"></param>
/// <returns></returns>
public string GetUserList()
{
#region ===代码=== var dataStr = context.Request["Data"];
if(string.IsNullOrEmpty(dataStr))
{
return "";
}
TestDataTable myData = Newtonsoft.Json.JsonConvert.DeserializeObject<TestDataTable>(dataStr); int totalCount = ;//所有的
//int selCount = 0;//根据条件搜索到的 System.Linq.Expressions.Expression<Func<ResourceApply, Boolean>> p = a => true;
if (!string.IsNullOrEmpty(myData.search))
{
p = a => a.ResourceName.ToUpper().Contains(myData.search.ToUpper());
} var list = new ResourceApplyService().GenericService.GetListByPage(myData.length, myData.pageIndex, out totalCount, p, a => a.CreateTime, true).ToList();
myData.recordsFiltered = totalCount;
myData.recordsTotal = totalCount;
myData.data = list; JavaScriptSerializer jss = new JavaScriptSerializer();
return jss.Serialize(myData);
#endregion ===代码=== }

PS:这句是取当前页,指定length条数的数据,这个取数据自己实现

 new ResourceApplyService().GenericService.GetListByPage(myData.length, myData.pageIndex, out totalCount, p, a => a.CreateTime, true).ToList();

Jquery.Datatable 控件后端分页实例 (后台使用ashx、aspx-webmethod)的更多相关文章

  1. Repeater控件的分页实现

    本文讲解Repeater控件与PagedDataSource相结合实现其分页功能.PagedDataSource 类封装那些允许数据源控件(如 DataGrid.GridView)执行分页操作的属性. ...

  2. jQuery树形控件zTree使用小结

    作者:Fonour 字体:[增加 减小] 类型:转载 时间:2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小 ...

  3. WPF MVVM 用户控件完成分页

    项目中经常会有分页查询的情况,在WPF中我们可以通过用户控件完成分页 一下为分页控件的页面代码, <UserControl x:Class="Foundation.UCtrl.Next ...

  4. 036. asp.netWeb用户控件之五使用用户控件实现分页数据导航

    UserDataPager.ascx用户控件代码: <%@ Control Language="C#" AutoEventWireup="true" Co ...

  5. jQuery操作控件

    在项目中添加前台控件radio,操作两个div的显示和隐藏,其实是一个很简单的问题,但是费了老大劲才完成,也就是jQuery操作控件的一些基础知识.方法有三种,简单介绍: 1.给元素设置style属性 ...

  6. 精确到秒的JQuery日期控件

    项目中需要用到精确到秒的日期控件,到网上搜了一下,发现有一个JQuery控件可以实现该功能---TimerPicker.但是官网上没有提供该控件的完整Demo,而且没有提供汉化包,所以自己汉化了一下, ...

  7. Jquery获得控件值的方法

    一 Jquery获得服务器控件值的方法 由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<a ...

  8. silverlight visifire控件图表制作——silverlight 后台方法页面事件

    1.返回事件 (1.返回silverlight页面,2.返回web页面) private void button_ClickBack(object sender, RoutedEventArgs e) ...

  9. silverlight visifire控件图表制作——silverlight 后台方法ControlChart.xaml.cs

    一.构造方法ControlChart 1.前台页面控件赋值 //时间下拉框赋值,下拉框赋选定值                for (int ii = DateTime.Today.Year; ii ...

随机推荐

  1. 导入大数据量sql时候超时的问题

    D:\Visual-NMP-x64\Bin\MySQL\bin这个是你mysql的路径 mysqldump.exe -h服务器信息 -umysql的用户名 -pmysql的密码 数据库名 > 要 ...

  2. UE4 C++ 笔记

    1.获取当前的GameMode:GameMode = Cast<你GameMode的类名>( UGameplayStatics::GetGameMode(this)); 2.输出日志Deb ...

  3. MVC生成页码选择器返回HTML代码

    我主要讲此代码用于MVC的分布页. 先看最终效果最终效果: 样式为bootstrap3中的分页“pagination”,如果不使用bootstrap单独提出来并不大 页码生成代码为: public s ...

  4. install linux on VM

    1. install完成之后,没有UI,可以在安装的向导过程中配置,先点击language,选择英语,然后再software那里 勾选,server with gui->KDE, 一定要在看到的 ...

  5. Failed to introspect annotated methods on class 异常

    用@enable时出现错误 Failed to introspect annotated methods on class 很可能是库和springboot版本不一致

  6. C#读取OPC server

    1.安装opc server https://blog.csdn.net/yhtppp/article/details/80676118 2.c#读取opc https://github.com/le ...

  7. vue在main.js中全局引用css的方法及坑

    步骤: 1.配置文件webpack.config.js: { test:/\.css$/, loader:'style-loader!css-loader' } 坑1:-loader尾缀 坑2:Mod ...

  8. audiounit错误码对应值查询

    https://www.osstatus.com/search/results?platform=all&framework=all&search=(错误码的值) EX:  https ...

  9. web前端面试题题目

    一.各种浏览器兼容的前缀:-o-(Opera),-ms-(IE): -moz-(火狐):-webkit-(chrome) 二.存在兼容性的css属性:placeholder,主要是因为各种浏览器pla ...

  10. 【redis 学习系列】API的理解与使用(二)

    3.哈希 几乎所有的语言都支持了哈希(hash)类型.在Redis中,哈希类型是指键值本身又是一个键值对结构,形如:value = {{field, value} ... {field, value} ...