bootstrap table 服务器端分页--ashx+ajax
1.准备静态页面
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <meta charset="utf-8" />
7 <link rel="stylesheet" href="../Content/bootstrap.min.css">
8 <link rel="stylesheet" href="../Content/bootstrap-table.css">
9 <script src="../Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
10 <script src="../Scripts/bootstrap.min.js"></script>
11 <script src="../Scripts/bootstrap-table.js"></script>
12 <script src="../Scripts/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
13 <script src="js/list2.js" type="text/javascript"></script>
14 </head>
15 <body>
16 <iframe src="nav.html" height="50" width="100%" frameborder="0" scrolling="no"></iframe>
17 <p>用bootstrap table显示数据列表</p>
18 <table id="table">
19 <thead>
20 <tr>
21 <th data-field="state" data-checkbox="true"></th>
22 <th data-field="adminID" data-sortable="true" data-align="center">编号</th>
23 <th data-field="LoginID" data-align="center">登录名</th>
24 <th data-field="AdminName" data-align="center">真实姓名</th>
25 <th data-field="sex" data-align="center" data-formatter="SEXFormatter">性别</th>
26 <th data-field="adminID" data-align="center" data-formatter="editFormatter">操作</th>
27 </tr>
28
29 </thead>
30 </table>
31 <input id="BtnDel" type="button" value="删除" />
32 </body>
33 </html>
2.写js代码
$(document).ready(function () {
$('#table').bootstrapTable({
url:"ashx/list2.ashx",//数据源
sidePagination: 'server',//设置为服务器端分页
pagination: true, //是否分页
search: true, //显示搜索框
pageSize: 5,//每页的行数
pageList: [5, 10, 20],
pageNumber: 1,//显示的页数
showRefresh: true,//刷新
striped: true,//条纹
sortName: 'adminID',
sortOrder: 'desc',
});
//删除按钮
$("#BtnDel").click(function () {
var DelNumS = getCheck();//获取选中行的人的编号
// alert(DelNumS);
//判断是否为空。。前面是否有多余的 逗号.(如果是全选，前面会多个，)
if (DelNumS.charAt(0) == ",") { DelNumS = DelNumS.substring(1); }
if (DelNumS == "") { alert("请选择额要删除的数据"); }
else
{
$.ajax({
type: "post",
url: "ashx/del.ashx",
data: { "Action": "Del", "DelNums": DelNumS },
dataType: "text",
success: function (data) {
var json = eval('(' + data + ')');
alert(json.info);
//刷新页面
// window.location.reload();
$('#table').bootstrapTable('refresh');
}
});
}
});
});
function SEXFormatter(value, row, index) { //处理性别的显示
if (value == 'True') {
value = '男';
}
else {
value = '女';
}
return value;
}
function editFormatter(value, row, index) { //处理操作
var str = '<a href="modify.aspx?id=' + value + '">编辑</a> <a href="show.html?UserID=' + value + '">详情</a>'
value = str;
return value;
}
function getCheck() { //获取表格里选中的行 的编号
var data = [];//数组
$("#table").find(":checkbox:checked").each(function () {
var val = $(this).parent().next().text();//当前元素的上一级---里的下一个元素--的内容
data.push(val);
});
return data.join(",");//用，连接
}
3.写删除功能
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5
6 namespace web.Admin.ashx
7 {
8 /// <summary>
9 /// Del 的摘要说明
10 /// </summary>
11 public class Del : IHttpHandler
12 {
13
14 public void ProcessRequest(HttpContext context)
15 {
16 context.Response.ContentType = "text/plain";
17 string json = "{}";
18 string action = context.Request.Form["Action"];
19 if (action == "Del")//删除操作
20 {
21 string DelNumS = context.Request.Form["DelNumS"];//获取批量删除的编号
22 BLL.Admin bll = new BLL.Admin();
23 if (bll.DeleteList(DelNumS))
24 {
25 json = "{'info':'删除成功'}";
26 }
27 else
28 { json = "{'info':'删除失败'}"; }
29 }
30 context.Response.Write(json);
31 }
32
33 public bool IsReusable
34 {
35 get
36 {
37 return false;
38 }
39 }
40 }
41 }
4.写获取数据列表
list.ashx5.BLL代码(...摘了部分)
关键代码6.关键的数据访问层
分页查询 批量删除 获取记录行数7.admin类
1 /** 版本信息模板在安装目录下，可自行修改。
2 * Admin.cs
3 *
4 * 功 能： N/A
5 * 类 名： Admin
6 *
7 * Ver 变更日期 负责人 变更内容
8 * ───────────────────────────────────
9 * V0.01 2016/3/1 16:02:52 N/A 初版
10 *
11 * Copyright (c) 2012 Maticsoft Corporation. All rights reserved.
12 *┌──────────────────────────────────┐
13 *│ 此技术信息为本公司机密信息，未经本公司书面同意禁止向第三方披露． │
14 *│ 版权所有：动软卓越（北京）科技有限公司 │
15 *└──────────────────────────────────┘
16 */
17 using System;
18 namespace Model
19 {
20 /// <summary>
21 /// Admin:实体类(属性说明自动提取数据库字段的描述信息)
22 /// </summary>
23 [Serializable]
24 public partial class Admin
25 {
26 public Admin()
27 {}
28 #region Model
29 private int _adminid;
30 private string _loginid;
31 private string _loginpwd;
32 private string _adminname;
33 private bool _sex;
34 /// <summary>
35 ///
36 /// </summary>
37 public int adminID
38 {
39 set{ _adminid=value;}
40 get{return _adminid;}
41 }
42 /// <summary>
43 ///
44 /// </summary>
45 public string LoginID
46 {
47 set{ _loginid=value;}
48 get{return _loginid;}
49 }
50 /// <summary>
51 ///
52 /// </summary>
53 public string LoginPWD
54 {
55 set{ _loginpwd=value;}
56 get{return _loginpwd;}
57 }
58 /// <summary>
59 ///
60 /// </summary>
61 public string AdminName
62 {
63 set{ _adminname=value;}
64 get{return _adminname;}
65 }
66 /// <summary>
67 ///
68 /// </summary>
69 public bool sex
70 {
71 set{ _sex=value;}
72 get{return _sex;}
73 }
74 #endregion Model
75
76 }
77 }
恋花望月轻轻唱 听雨随风悄悄追
