Jquery.Datatables 服務器處理(Server-side processing)

 

看了看介紹

http://datatables.club/manual/server-side.html

沒有經過處理的分頁，先顯示出來看看效果，就這樣寫（存儲過程自己寫）

 

cshtml

"serverSide": true,//服務器處理：過濾、分頁、排序
 "processing": true,//是否顯示處理狀態(排序的時候，數據很多耗費時間長的話，也會顯示這個)

 

controller.cs

//jquery.datatables
        public JsonResult GetUserInfoList()
        {
            try
            {
                int pageSize = int.Parse(Request.Params["length"]);
                int start = int.Parse(Request.Params["start"]);
                int pageIndex = start / pageSize + 1;

                JsonResponse list = UserInfoService.Service.GetDataTablesUserInfoList(pageIndex, pageSize);
                return this.Json(list);
            }
            catch (Exception ex)
            {
                return this.Json(UnifyResponse.ThrowError(ex));
            }
        }

 

bll

public JsonResponse GetDataTablesUserInfoList(int pageIndex, int pageSize)
        {
            try
            {
                proc_DataPagination p_page = new proc_DataPagination();
                p_page.Table = "UserInfo";
                p_page.Fields = "*";
                p_page.CurrentPage = pageIndex;
                p_page.PageSize = pageSize;
                p_page.OrderBy = "ID desc";
                p_page.Where = string.Format("1=1");
                //p_page.Where = string.Format("openid like '%{0}%'",);
                IList<UserInfo> list = DDataBase.WebDB.StoredProcedureToIList<proc_DataPagination, UserInfo>(p_page);

                JsonResponse mypage = new JsonResponse();
                mypage.data = list;
                mypage.recordsTotal = p_page.Count;
                mypage.recordsFiltered = p_page.Count;
             
                return mypage;
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

 

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">微信用戶管理</h1>
    </div>
</div>
<!-- /.col-lg-12 -->
<!-- /.row -->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-primary">
            <div class="row-fluid" id="div-advanced-search">
                <form class="form-inline well">
                    <span>openid:</span>
                    <input type="text" class="input-medium" placeholder="openid" id="openid-search">
                    <span>昵稱:</span>
                    <input type="text" class="input-medium" placeholder="昵稱" id="nickname-search">
                    @*                        <span>工作地點:</span>
                        <input type="text" class="input-medium" placeholder="工作地點" id="office-search">
                        <span>編號:</span>
                        <input type="text" class="input-medium" placeholder="編號" id="extn-search">
                        <span>在線狀態:</span>
                        <select class="input-small" id="status-search">
                            <option value="">全部</option>
                            <option value="1">在線</option>
                            <option value="0">離線</option>
                        </select>
                        <select class="input-small" id="role-search">
                            <option value="">全部</option>
                            <option value="1">管理員</option>
                            <option value="0">操作員</option>
                        </select>*@
                    <button type="button" class="btn" id="btn-advanced-search"><i class="fa fa-search"></i>查詢</button>
                    <button type="button" class="btn" id="btn-clear-search"><i class=""></i>清空</button>
                </form>
            </div>

            <div class="panel-heading">
                微信用戶               
            </div>
            <!-- /.panel-heading -->

 

 

重點來了，搜索就用自定義搜索
//column().search()
//地址：https://datatables.net/reference/api/column().search() 

//自定義搜索
    //column().search()
    //地址：https://datatables.net/reference/api/column().search()  
    $("#btn-advanced-search").click(function () {
        tables.column(1)
            .search($('#openid-search').val())
            .column(2)
            .search($('#nickname-search').val())
            .draw();
    });

    //清空
    $("#btn-clear-search").click(function () {
        $('#openid-search').val('');
        $('#nickname-search').val('');
        tables.column(1)
           .search($('#openid-search').val())
           .column(2)
           .search($('#nickname-search').val())
           .draw();
    });