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 ...
随机推荐
- linux之fork()函数详解
一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程, 也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同 ...
- 【C#】：浅谈反射机制 【转】
http://blog.csdn.net/lianjiangwei/article/details/47207875 什么是反射? 反射提供了封装程序集.模块和类型的对象(Type 类型).可以使用反 ...
- TensorFlow------单层(全连接层)实现手写数字识别训练及测试实例
TensorFlow之单层(全连接层)实现手写数字识别训练及测试实例: import tensorflow as tf from tensorflow.examples.tutorials.mnist ...
- phantomjs 抓取房产信息
抓取https://sf.taobao.com/item_list.htm信息 driver=webdriver.PhantomJS(service_args=['--ssl-protocol=any ...
- mysql 5.7之后版本datatime 不允许设置 0000-00-00 00:00:00 的问题
打开mysql.ini配置文件 在mysqld下 加入sql-model验证规则即可 sql-mode=ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FO ...
- 2017.12.11SimpleDateFormat的线程安全性讨论
转载来自:http://blog.csdn.net/zxh87/article/details/19414885 1.结论 DateFormat和SimpleDateFormat都不是线程安全的.在多 ...
- TestNG 六 测试结果
一.成功.失败和断言 如果一个测试没有抛出任何异常就完成运行或者说抛出了期望的异常(参见@Test注解的expectedExceptions属性文档),就说,这个测试时成功的. 测试方法的组成常常包括 ...
- TestNG 五 运行TestNG
一.并行运行于超时 可以通过在suite标签中使用 parallel 属性来让测试方法运行在不同的线程中.这个属性可以带有如下这样的值: <suite name="My suite&q ...
- TestNG 二、测试组
一.测试组 TestNG 允许你将测试方法归类为不同的组.不仅仅是可以声明某个方法属于某个组,而且还可以让组包含其他的组.这样TestNG可以调用或者请求包含一组特定的组 (或者正则表达式)而排除其他 ...
- Activity生命周期以及启动模式对生命周期的影响(二)
前面一篇文章概述了Android四大组件之一的Activity生命周期方法的调用先后顺序,但对于非标准启动模式下Activity被多次调用时的一些生命周期方法并未详细阐述,现在针对该情况着重记录. 现 ...