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

時間 2019-11-25

標籤 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>

list2.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(",");//用，鏈接
}

list2.js

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 }

del.ashx

4.寫獲取數據列表前端

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Data;
 6 namespace web.Admin.ashx
 7 {
 8     /// <summary>
 9     /// l1 的摘要說明
10     /// </summary>
11     public class list2 : IHttpHandler, System.Web.SessionState.IRequiresSessionState//session接口
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 
20             int displayStart = int.Parse(context.Request["offset"]);
21             int displayLength = int.Parse(context.Request["limit"]);
22 
23             BLL.Admin bll = new BLL.Admin();
24             int total = bll.GetRecordCount("");
25                     DataSet ds = bll.GetListByPage("","", displayStart+1, displayStart+ displayLength);
26                     ds.Tables[0].TableName = "rows";
27                     //返回列表
28                     json = Web.DataConvertJson.DataTable2Json(ds.Tables[0]);
29             //http://down.admin5.com/info/2015/1209/130229.html
30             //??服務器端返回的數據中還要包括rows，total（數據總量）兩個字段，前端要根據這兩個字段分頁。
31             json = "{\"total\":" + total + "," + json.Substring(1);
32 
33             /*
34              返回數據格式
35              {"total":100,"rows":....}
36              
37              */
38 
39             context.Response.Write(json);
40         }
41 
42         public bool IsReusable
43         {
44             get
45             {
46                 return false;
47             }
48         }
49     }
50 }

list.ashx

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

1     public DataSet GetListByPage(string strWhere, string orderby, int startIndex, int endIndex)
2         {
3             return dal.GetListByPage( strWhere,  orderby,  startIndex,  endIndex);
4         }

關鍵代碼

6.關鍵的數據訪問層jquery

public DataSet GetListByPage(string strWhere, string orderby, int startIndex, int endIndex)
        {
            StringBuilder strSql=new StringBuilder();
            strSql.Append("SELECT * FROM ( ");
            strSql.Append(" SELECT ROW_NUMBER() OVER (");
            if (!string.IsNullOrEmpty(orderby.Trim()))
            {
                strSql.Append("order by T." + orderby );
            }
            else
            {
                strSql.Append("order by T.adminID desc");
            }
            strSql.Append(")AS Row, T.*  from Admin T ");
            if (!string.IsNullOrEmpty(strWhere.Trim()))
            {
                strSql.Append(" WHERE " + strWhere);
            }
            strSql.Append(" ) TT");
            strSql.AppendFormat(" WHERE TT.Row between {0} and {1}", startIndex, endIndex);
            return DbHelperSQL.Query(strSql.ToString());
        }

分頁查詢

 /// <summary>
        /// 批量刪除數據
        /// </summary>
        public bool DeleteList(string adminIDlist )
        {
            StringBuilder strSql=new StringBuilder();
            strSql.Append("delete from Admin ");
            strSql.Append(" where adminID in ("+adminIDlist + ")  ");
            int rows=DbHelperSQL.ExecuteSql(strSql.ToString());
            if (rows > 0)
            {
                return true;
            }
            else
            {
                return false;
            }
        }

批量刪除

        /// <summary>
        /// 獲取記錄總數
        /// </summary>
        public int GetRecordCount(string strWhere)
        {
            StringBuilder strSql=new StringBuilder();
            strSql.Append("select count(1) FROM Admin ");
            if(strWhere.Trim()!="")
            {
                strSql.Append(" where "+strWhere);
            }
            object obj = DbHelperSQL.GetSingle(strSql.ToString());
            if (obj == null)
            {
                return 0;
            }
            else
            {
                return Convert.ToInt32(obj);
            }
        }

獲取記錄行數

7.admin類web

 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 }