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. 递归/非递归----python深度遍历二叉树(前序遍历,中序遍历,后序遍历)

    递归代码:递归实现很简单 '二叉树结点类' class TreeNode: def __init__(self, x): self.val = x self.left = None self.righ ...

  2. 洛谷P3252 [JLOI2012]树

    题目描述 在这个问题中,给定一个值S和一棵树.在树的每个节点有一个正整数,问有多少条路径的节点总和达到S.路径中节点的深度必须是升序的.假设节点1是根节点,根的深度是0,它的儿子节点的深度为1.路径不 ...

  3. java项目文件的路径问题

    title: 项目下的路径问题 tags: grammar_cjkRuby: true --- 在javaee的项目中,存取文件,解析xml和properties文件,以及项目中的文件,都需要获取路径 ...

  4. 安装pillow

    最近想学Python的图像操作.首要任务就是安装pillow.这个强大的图形处理工具. 但是我遇到了一个问题. Collecting pilow  Could not find a version t ...

  5. Oracle数据库获取一行记录中某几个字段的最大值/最小值函数

    在数据库的开发过程中,我们可能会遇到这样的需求,获取一行记录中某几个字段的最大值或者是最小值,oracle给我们提供了解决这种需求的函数,如下所示:   greatest(col1, col2, co ...

  6. WCF IIS部署

    创建WCFHost应用程序 Iservice.cs using System; using System.Collections.Generic; using System.Linq; using S ...

  7. 浏览器原生 form 表单POST 数据的两种方式

    我们在提交表单的时候,form表单参数中会有一个enctype的参数.enctype指定了HTTP请求的Content-Type. 常用有两种:application/x-www-form-urlen ...

  8. CodeForces 484A Bits(水题)

    A. Bits time limit per test 1 second memory limit per test 256 megabytes input standard input output ...

  9. linux消息队列相关操作

    /* 发送消息队列 */ #include <stdio.h>#include <stdlib.h>#include <string.h>#include < ...

  10. HN669打包工具--环境准备

    1.安装JDK 这个百度,Google一大堆,可以自行参考.仅仅注意,不要安装错了,根据自己系统是32位还是64位,安装MAC下的JDK版本.系统32/64位查询命令:uname -a下载地址安装指导 ...