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.写获取数据列表
5.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 }
bootstrap table 服务器端分页--ashx+ajax的更多相关文章
- bootstrap table 服务器端分页例子分享
这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...
- 161222、Bootstrap table 服务器端分页示例
bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...
- bootstrap table 服务器端分页例子
1,前台引入所需的js 可以从官网上下载 function getTab(){ var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatV ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- C# Bootstrap table之 分页
效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...
- [转]C# Bootstrap table之 分页
本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...
- [转]Bootstrap table后端分页（ssm版）
原文地址:https://www.cnblogs.com/flyins/p/6752285.html 说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分 ...
- Bootstrap table后端分页（ssm版）
说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分页,即实用limit.性能较好,一般均用这种源码下载地址:https://git.oschina.ne ...
- Bootstrap table前端分页（ssm版）
说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...
随机推荐
- DXR
https://github.com/ConfettiFX/The-Forge/blob/master/CommonRaytracing_3/ThirdParty/DXR/doc/D3D12%20Ra ...
- （转）MySQL的JDBC驱动源码解析
一.背景 MySQL是一个中小型关系型数据库管理系统,目前我们淘宝也使用的也非常广泛.为了对开发中间DAO持久层的问题能有更深的理解以及最近在使用的phoenix on Hbase的SQL也是实现的J ...
- 在SVN中打分支
项目开发中一个版本号也许就有几次迭代,而完毕一次迭代或一个版本号时,一般会讨论下一步的计划.是否要增加新东西新技术,内部人员是否有变动,这时须要在管理工具中做一些备份,以防我们接下来即使改动serve ...
- sqlite developer注册码
sqlite developer注册码网上没有找到,只有通过注册表,删除继续使用,删除注册表中 HKEY_CURRENT_USER\SharpPlus\SqliteDev.
- Android,TextView的所有属性和方法
XML 属性 属性名称 相关方法 描述 android:autoLink setAutoLinkMask(int) 设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接. ...
- JAVA 画图机制
java学习脚印:深入java绘图机制 写在前面 封装性越好的类在使用时,只要清楚接口即可,而不应该让程序员了解其内部结构; 对于平常的绘图来讲,java绘图机制无需了解太多,但是朦胧容易产生错误,绘 ...
- Win8 Metro中文件读写删除与复制操作
Win8Metro中,我们不能在向以前那样调用WIN32的API函数来进行文件操作,因此,下面就来介绍一下Win8 Metro中文件的读写操作. 1 Windows 8 Metro Style App ...
- 关于HTML、js加密、混淆、源码保护、代码安全，防止解压直接看源码
一直有人问HTML加密混淆怎么做,其实这在业内是早已很多人研究过的课题.假日期间整理一篇文章分享给大家. 我们先理下需求,加密的目的是什么?加密到什么级别?为此我们可以牺牲什么?我们知道这个世界不存在 ...
- eslint for...in 报错处理
示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...
- Android双向seekbar
※效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/disso ...