bootstrap table 服務器端分頁--ashx+ajax

時間 2019-11-16

標籤 bootstrap table 服務器分頁 ashx+ajax ashx ajax 欄目 Bootstarp 简体版

原文原文鏈接

1.準備靜態頁面javascript

 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代碼css

$(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>&nbsp;&nbsp;&nbsp;&nbsp;<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.寫刪除功能html

 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.寫獲取數據列表java

list.ashx

5.BLL代碼(...摘了部分)jquery

關鍵代碼

6.關鍵的數據訪問層web

分頁查詢

批量刪除

獲取記錄行數

7.admin類ajax

 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 }