jQuery DataTables 分頁


HTML:==================================================================

 <div class="ibox-content">
                        <div class="thead">                 
                         <input placeholder="請輸入搜索內容" id="strWhere" type="text" />
                        </div>
                        <table id="userlist" class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                      <th></th>
                                    <th><input type="checkbox" class="checkall" /></th>                               
                                    <th>昵稱</th>
                                    <th>電話</th>
                                    <th>性別</th>
                                    <th>年齡</th>
                                    <th>注冊日期</th>
                                    <th>狀態</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>

 

JS:(注:我的jQuery DataTables已經漢化,此處不再配置oLanguage)=====================
$(function () {
   
    $('#userlist').DataTable({
        bProcessing: true, //DataTables載入數據時,是否顯示‘進度’提示  
        bStateSave: false, //是否打開客戶端狀態記錄功能,此功能在ajax刷新紀錄的時候不會將個性化設定回復為初始化狀態  
        aLengthMenu: [10,20, 40, 60, 100, 1000], //更改顯示記錄數選項  
        iDisplayLength: 10, //默認顯示的記錄數  
        bInfo: true, //是否顯示頁腳信息,DataTables插件左下角顯示記錄數  
        bPaginate: true, //是否顯示(應用)分頁器  
        autoWidth: true, //是否自適應寬度  
        bScrollCollapse: true, //是否開啟DataTables的高度自適應,當數據條數不夠分頁數據條數的時候,插件高度是否隨數據條數而改變  
        sPaginationType: "full_numbers", //詳細分頁組,可以支持直接跳轉到某頁  
        bSort: false, //是否啟動各個字段的排序功能  
        bFilter: false, //是否啟動過濾、搜索功能        
        bServerSide: true,//開啟此模式后,你對datatables的每個操作 每頁顯示多少條記錄、下一頁、上一頁、排序(表頭)、搜索,這些都會傳給服務器相應的值。
        "ajax": {
            url: "/Ajax/UserMgrAjax.ashx?cmd=userList",
            type:"POST",
            data: { "strWhere": $('#strWhere').val() }
            
        } ,
        columns: [
            {
                "sWidth": "4%",
                "sClass": "text-center",
                "data": null, "targets": 0
            },
             {
                 "sWidth": "4%",
                 "sClass": "text-center",
                 "data": "u_id",
                 "render": function (data, type, full, meta) {//這里就是要顯示的checkbox多選框了
                     return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
                 },
                 "bSortable": false
             },
              
              { "sClass": "text-center", "data": "u_name" },
             { "sClass": "text-center", "data": "u_tel" },
             {
                 "sClass": "text-center",
                 "data": "u_sex",
                 "render": function (data, type, row, meta) {
                   
                     var content = "保密";
                     if (data == "1")
                         content = "男";
                     if (data == "2")
                         content = "女";
                     return content;
                 }
                 
             },
             { "sClass": "text-center", "data": "u_age" },
             { "sClass": "text-center", "data": "u_registerdate" },
             {
                 "sClass": "text-center",
                 "data": "u_state",
                 "render": function (data, type, row, meta) {
                     var content = "非正常";
                     if (data == "0")
                         content = "正常";
                     if (data == "1")
                         content = "鎖定";
                     return content;
                 }
             },
             {
                 "sClass": "text-center",
                 "data": "u_registerdate",
                 render: function (data, type, row, meta) {

                     return "<a title='編輯' class='glyphicon glyphicon-edit nounderline' href='javascript:editTabRow();'></a>&nbsp;";
                 }
             }
             
        ],
        fnDrawCallback: function () {
            
            var startIndex = this.api().context[0]._iDisplayStart;//獲取到本頁開始的條數
            this.api().column(0).nodes().each(function (cell, i) {
             //翻頁序號連續
             cell.innerHTML = startIndex + i + 1;

            });
        }
       
    });
    $(".checkall").click(function () {
        var check = $(this).prop("checked");
        $(".checkchild").prop("checked", check);
    });

});

.ashx.cs:==================================================================
namespace SmartAdmin.Ajax
{
    /// <summary>
    /// UserMgrAjax 的摘要說明
    /// </summary>
    public class UserMgrAjax : IHttpHandler
    {
        string info = "";
        string json = "";
        bool rbool = false;
        HttpContext context;
        JavaScriptSerializer jss = new JavaScriptSerializer();
        Dictionary<string, object> dic = new Dictionary<string, object>();
        public void ProcessRequest(HttpContext context)
        {
            this.context = context;
            context.Response.ContentEncoding = Encoding.GetEncoding("utf-8");//避免出現亂碼
            //接收瀏覽器 get/post 過來的參數cmd
            string cmd = context.Request["cmd"].ToString();
            switch (cmd)
            {
                case "userList": json = GetUserList();
                    break;
            }
            context.Response.Write(json);
        }
        /// <summary>
        /// 獲得用戶列表
        /// </summary>
        /// <param name="index"></param>
        /// <returns></returns>
        public string GetUserList()
        {
            #region ===代碼===
            int totalCount = 0;//所有的
            int selCount = 0;//根據條件搜索到的
            string sqlSel = RequestHelper.GetQueryString("strWhere");
            List<t_user> list = UserDal.m_UserDal.GetList("");
            totalCount = list.Count;
            int draw = Common.Utils.ToInt(context.Request.Params["draw"]);
            int start = Common.Utils.ToInt(context.Request.Params["start"]);
            int length = Common.Utils.ToInt(context.Request.Params["length"]);
            list = UserDal.m_UserDal.GetList(sqlSel, length, (start / length) + 1);
            selCount = list.Count;
            dic.Add("draw", draw);
            dic.Add("recordsTotal", selCount);
            dic.Add("recordsFiltered", totalCount);
            dic.Add("data", list);
            return jss.Serialize(dic);
            #endregion ===代碼===

        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}


 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM