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 ...
随机推荐
- 流畅的python第十六章协程学习记录
从句法上看,协程与生成器类似,都是定义体中包含 yield 关键字的函数.可是,在协程中,yield 通常出现在表达式的右边(例如,datum = yield),可以产出值,也可以不产出——如果 yi ...
- android apktool 基本的安装与使用
apktool: 1. 安装 http://ibotpeaches.github.io/Apktool/install/ 2. 基本使用 http://ibotpeaches.github.io/Ap ...
- 转： Android Studio你不知道的调试技巧
http://tianweishu.com/2015/12/21/android-studio-debug-tips-you-may-not-know/
- 【大盛】全网首发HTC One/M7 最新本地化TrickDroid9.0/固件升级/永久root/高级,快速设置/稳定,流畅经典ROM
了解更多请关注:点击打开链接 ROM版本 HTC One/M7_TrickDroid9.0.0 ROM作者 雪狼团队-大盛 http://weibo.com/DaShengdd Android版本 ...
- hibernate 多对多单向
多对多会利用中间表做外键的形式关联 package com.bjsxt.hibernate; import javax.persistence.Entity; import javax.persi ...
- Fragment的陷阱
以前做过的一个项目,Fragment嵌套高德地图,当再次进入Fragment的时候,会出现奇怪的现象.嵌套的地图会出现滑动不动的情况,起先还以为是高德的bug呢,经过一番研究,终确定这是一个坑. 先对 ...
- 深入浅出REST架构 REST架构概述
http://www.nowamagic.net/librarys/veda/detail/885何为REST? REST是英文Representational State Transfer的缩写,中 ...
- Android权限说明 system权限 root权限
原文链接:http://blog.csdn.net/rockwupj/article/details/8618655 Android权限说明 Android系统是运行在Linux内核上的,Androi ...
- WPF SL 属性生成器
在开发WPF 和SL应用的时候通用会用到MVVM模式,每次写到类属性的时候要不断的写属性更新时通知方法,写多了就嫌烦,就手写了个属性生成工具,在属性更新的时候添加了更新通知方法. 工具中支持自定义类对 ...
- Linux-Vim常用操作
vim wangyunpeng.txt 创建一个wangyunpeng.txt文件 输入"i"进入插入模式 显示行号,需要在命令模式下输入":se nu" cp ...