1.head表签引用

这两个文件即可

2.复制下面的代码到webform中的head标签中

<script>
$(function () {
//提示信息
var lang = {
"sProcessing": "处理中...",
"sLengthMenu": "每页 _MENU_ 项",
"sZeroRecords": "没有匹配结果",
"sInfo": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。",
"sInfoEmpty": "当前显示第 0 至 0 项,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页",
"sJump": "跳转"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
};

//初始化表格
var table = $("#example").dataTable({
language: lang, //提示信息
bSort: true,
autoWidth: false, //禁用自动调整列宽
stripeClasses: ["odd", "even"], //为奇偶行加上样式,兼容不支持CSS伪类的场合
processing: true, //隐藏加载提示,自行处理
serverSide: true, //启用服务器端分页
//aoColumnDefs: [
// { "bSortable": false, "aTargets": [0] }
//],
searching: true, //是否禁用原生搜索(false为禁用,true为使用)
orderMulti: false, //启用多列排序
order: [], //取消默认排序查询,否则复选框一列会出现小箭头
renderer: "bootstrap", //渲染样式:Bootstrap和jquery-ui
pagingType: "full_numbers", //分页样式:simple,simple_numbers,full,full_numbers
bScrollInfinite: true,
columnDefs: [{
"targets": 'nosort', //列的样式名
"orderable": false //包含上样式名‘nosort’的禁止排序
}],
ajax: function (data, callback, settings) {
//封装请求参数
var param = {};
param.limit = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候
param.start = data.start;//开始的记录序号
param.page = (data.start / data.length) + 1;//当前页码
param.search = data.search.value;//搜索条件
if (data.order.length > 0) {
param.order = data.columns[data.order[0].column].data;
param.dir = data.order[0].dir;
}
console.log(param);
//ajax请求数据
$.ajax({
type: "GET",
url: "/WebForm1.aspx?Action=LoadDataList",
cache: false, //禁用缓存
data: param, //传入组装的参数
dataType: "json",
success: function (result) {
//console.log(result);
//setTimeout仅为测试延迟效果
setTimeout(function () {
//封装返回数据
var returnData = {};
returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = result.total;//返回数据全部记录
returnData.recordsFiltered = result.total;//后台不实现过滤功能,每次查询均视作全部结果
returnData.data = result.data;//返回的数据列表
console.log(returnData);
//调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
callback(returnData);
}, 200);
}
});
},
//列表表头字段
columns: [
{ "data": "Id" },
{ "data": "Name" },
{ "data": "Age" }
]
}).api();
//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
});
</script>

3.在form标签中复制以下代码

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Id</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</tfoot>
</table>

4.在webform后台中复制以下代码

string action = Request.Params["Action"];
if (!string.IsNullOrEmpty(action) && action.Equals("LoadDataList"))
{
int page = !string.IsNullOrEmpty(Request.Params["page"]) ? Convert.ToInt32(Request.Params["page"]) : 1;
int limit = !string.IsNullOrEmpty(Request.Params["limit"]) ? Convert.ToInt32(Request.Params["limit"]) : 1;
int start = !string.IsNullOrEmpty(Request.Params["start"]) ? Convert.ToInt32(Request.Params["start"]) : 0;
//搜索的条件
string search = Request.Params["search"];
//排序的字段名称
string order = Request.Params["order"];
//排序类型
string dir = Request.Params["dir"];

#region 获取符合查询条件的数据集合
List<Student> listData = new List<Student>();
for (int i = 0; i < list.Count; i++)
{
if (string.IsNullOrEmpty(search))
{
listData.Add(list[i]);
}
else
{
if (list[i].Name.Contains(search))
{
listData.Add(list[i]);
}
}
}
#endregion
//排序,我这里写死了根据名称排序
if (!string.IsNullOrEmpty(order) && !string.IsNullOrEmpty(dir))
{
if (dir.Equals("asc"))
{
listData = listData.OrderBy(a => a.Name).ToList();
}
else
{
listData = listData.OrderByDescending(a => a.Name).ToList();
}
}

//获取datatables要查询几条数据的数据集合
List<Student> listData1 = new List<Student>();
for (int i = (page - 1) * limit; i < page * limit; i++)
{
if (i >= listData.Count)
{
break;
}
listData1.Add(listData[i]);
}
var data1 = new
{
total = listData.Count,
page = 5,
limit = 10,
data = listData1
};
string jsonData = JsonConvert.SerializeObject(data1);
Response.Write(jsonData);
Response.End();
}

5.在方法外面添加一个这样的集合

List<Student> list = new List<Student>() {
new Student(){ Id = 1, Name = "彭文峰", Age = 20 },
new Student(){ Id = 2, Name = "李宝明", Age = 22 },
new Student(){ Id = 3, Name = "赖道兴", Age = 24 },
new Student(){ Id = 4, Name = "唐静", Age = 23 },
new Student(){ Id = 5, Name = "李团全", Age = 21 },

new Student(){ Id = 6, Name = "蒙志英", Age = 20 },
new Student(){ Id = 7, Name = "钟志敏", Age = 22 },
new Student(){ Id = 8, Name = "彭永庆", Age = 24 },
new Student(){ Id = 9, Name = "戴曦", Age = 23 },
new Student(){ Id = 10, Name = "韦宗辰", Age = 21 },

new Student(){ Id = 6, Name = "蒙志英", Age = 20 },
new Student(){ Id = 7, Name = "钟志敏", Age = 22 },
new Student(){ Id = 8, Name = "彭永庆", Age = 24 },
new Student(){ Id = 9, Name = "戴曦", Age = 23 },
new Student(){ Id = 10, Name = "韦宗辰", Age = 21 },

new Student(){ Id = 6, Name = "蒙志英", Age = 20 },
new Student(){ Id = 7, Name = "钟志敏", Age = 22 },
new Student(){ Id = 8, Name = "彭永庆", Age = 24 },
new Student(){ Id = 9, Name = "戴曦", Age = 23 },
new Student(){ Id = 10, Name = "韦宗辰", Age = 21 },

new Student(){ Id = 11, Name = "彭宇云", Age = 20 },
new Student(){ Id = 12, Name = "钟善贵", Age = 22 },
new Student(){ Id = 13, Name = "邱明明", Age = 24 },
new Student(){ Id = 14, Name = "黄吉良", Age = 23 },
new Student(){ Id = 15, Name = "梁辉杰", Age = 21 }
};

基本上就OK了
唯一要改估计就是那个ajax请求的路径了

datatables后台分页例子(可直接复制代码)的更多相关文章

  1. 使用Junit测试一个 spring静态工厂实例化bean 的例子,所有代码都没有问题,但是出现java.lang.IllegalArgumentException异常

    使用Junit测试一个spring静态工厂实例化bean的例子,所有代码都没有问题,但是出现 java.lang.IllegalArgumentException 异常, 如下图所示: 开始以为是代码 ...

  2. Lea指令计算地址(用于四则混合运算),附上一个函数调用例子及其反汇编代码,很清楚

    比如你用local在栈上定义了一个局部变量LocalVar,你知道实际的指令是什么么?一般都差不多像下面的样子:     push   ebp     mov   esp,   ebp     sub ...

  3. 自动获取代理IP信息的例子,含代码,分享哦,

    /// <summary> /// 读取URL数据内容 /// </summary> /// <param name="url">网址</ ...

  4. oracle调用java方法的例子(下面所有代码都是在sql/plus中写)

    在Oracle中调用Java程序,注意:java方法必须是static类型的,如果想在JAVA中使用system.out/err输出log. 需要在oracle 中执行"call dbms_ ...

  5. PyQt开发案例:结合QDial实现的QStackedWidget堆叠窗口程序例子及完整代码

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.案例说明 本案例是老猿在学习QStackedWidget中的一个测试案例,该案例使用QStack ...

  6. jQuery datatables

    jQuery datatables 属性,用例 参考:http://datatables.club/example/ http://blog.csdn.net/mickey_miki/article/ ...

  7. jquery dataTables.min.js API

    demo: http://datatables.net/release-datatables/examples/api/select_single_row.html 选择一行http://datata ...

  8. DataTables 配置和使用

    WEB后台开发,如果用的是Bootstrap框架,那这个表格神器你一定不要错过. 官方地址:https://datatables.net/ What?英文不好,没关系咱有中文的 http://data ...

  9. JQuery插件datatables相关api

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

随机推荐

  1. 1095 Cars on Campus (30)(30 分)

    Zhejiang University has 6 campuses and a lot of gates. From each gate we can collect the in/out time ...

  2. BZOJ_1025_[SCOI2009]游戏_DP+置换+数学

    BZOJ_1025_[SCOI2009]游戏_DP+置换 Description windy学会了一种游戏.对于1到N这N个数字,都有唯一且不同的1到N的数字与之对应.最开始windy把数字按 顺序1 ...

  3. python反复执行某个命令

    #! /usr/bin/env python #coding=utf-8 # 以需要的时间间隔执行某个命令    import time, os    def re_exe(cmd, inc = 60 ...

  4. node.js Web应用框架Express入门指南

    node.js Web应用框架Express入门指南 作者: 字体:[增加 减小] 类型:转载 时间:2014-05-28 我要评论 这篇文章主要介绍了node.js Web应用框架Express入门 ...

  5. 《c# 实现p2p文件分享与传输系统》 一、 模型

    c#实现P2P文件分享与传输系统 一.模型 P2P的概念大家都不陌生,也就是所谓的“点对点传输”,即不直接通过服务器,在两台或多台客户端之间传输数据,实现信息交流和资源共享.P2P技术已经发展了很多年 ...

  6. bzoj 5093 图的价值 —— 第二类斯特林数+NTT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=5093 每个点都是等价的,从点的贡献来看,得到式子: \( ans = n * \sum\li ...

  7. Python pip 报错

    1,pip ssl certification ssl: certificate_verify_failed... 2,Could not find a version that satisfies ...

  8. [hdu4311]Meeting point-1

    题意:在整数坐标轴上找一个距离所有给定点距离最小的点. 解题关键:对x和y分别处理,前缀和预处理所有点到最小点的距离,每点的$sum$等于左边的贡献+右边的贡献,最后取$min$即可. 复杂度:$O( ...

  9. eclipse中jquery.js文件有错误提示…

    eclipse中jquery.js文件有错误提示的解决办法 2013-04-06 19:18 浏览次数:382 由于jquery.js文件进行了压缩,压缩之后的语法eclipse无法完全识别,所以有错 ...

  10. Open-source Tutorial - Json.NET

    JSON 简介 JSON(JavaScript Object Notation,JavaScript对象表示法)是一种由道格拉斯·克罗克福特构想和设计.轻量级的数据交换语言,该语言以易于让人阅读的文字 ...