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 ...
随机推荐
- 如何使用awk的比较操作符
对于使用 awk 命令的用户来说,处理一行文本中的数字或者字符串时,使用比较运算符来过滤文本和字符串是十分方便的.下面的部分我们介绍"awk"的比较运算符. awk 中的比较运算符 ...
- install.Android
It was not possible to complete an automatic installation. This might be due to a problem with your ...
- 前端性能优化：DocumentFragments或innerHTML取代复杂的元素注入
来源:GBin1.com 我们的浏览器执行越来越多的特性,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了.前端给力的地方是可以有 许多种简单的策略和代码习惯让我们可 ...
- 怎样在model里面使用number_to_currency
ActiveSupport::NumberHelper.number_to_currency(amount, precision: 0)
- centos 7安装 navicat
下载地址: http://download.navicat.com/download/navicat111_mysql_en.tar.gz 下载后copy到指定安装文件夹 [hcr@localhost ...
- ffmpeg的新东东:AVFilter
http://blog.csdn.net/niu_gao/article/details/7219641 利用ffmpeg做图像的pixel format转换你还在用libswscale吗?嘿嘿,过时 ...
- 安卓Eclipse开发人员的福音
我们知道.谷歌已经放弃对Eclipse(ADT)的维护更新了.如今官网上也找不到ADT的下载链接了,我们大多数同学仍在使用的ADT版本号可能已经非常老了,预计大多数的SDK版本号仅仅到4.4,而,在尝 ...
- Nutch的发展历程(转)
2002年8月由Doug Cutting发起,托管于Sourceforge,之后发布了0.4.0.5.0.6三个版本 2004年9月Oregon State University(俄勒冈州立大学)采用 ...
- 分享一下自己ios开发笔记
// ********************** 推断数组元素是否为空 ********************** NSString *element = [array objectAtIndex ...
- 忽略警告注解@SuppressWarnings详解
简介:java.lang.SuppressWarnings是J2SE 5.0中标准的Annotation之一.可以标注在类.字段.方法.参数.构造方法,以及局部变量上. 作用:告诉编译器忽略指定的警告 ...