BootStrap-Table 分頁

bootstrap-Table:http://bootstrap-table.wenzhixin.net.cn/

頁面

<div class="widget-content">
    <div id="toolbar">
        <a id="add" class="btn btn-default" href="/CompanyInfo/Add">
            <i class="glyphicon glyphicon-plus"></i> 建立
        </a>
    </div>
    <table id="table" class="table table-bordered dataTable"
           data-toggle="table"
           data-search="true"
           data-toolbar="#toolbar"
           data-url="@Url.Action("GetPageData")"
           data-method="post"
           data-content-type="application/x-www-form-urlencoded"
           data-side-pagination="server"
           data-pagination="true"
           data-sort-name="CompanyName"
           data-sort-order="asc"
           data-query-params="queryParams">
        <thead>
            <tr>
                <th data-field="CompanyName" data-sortable="true" data-halign="center">企業名稱</th>
                <th data-field="CompanyShort" data-sortable="true" data-halign="center">企業簡稱</th>
                <th data-field="Address" data-sortable="true" data-halign="center">位址</th>
                <th data-field="LinkName" data-sortable="true" data-halign="center">聯系人</th>
                <th data-field="LinkTel" data-sortable="true" data-halign="center">聯系電話</th>
                <th data-align="center" data-formatter="operateFormatter" data-width="60px"></th>
            </tr>
        </thead>
    </table>
</div>      

<link rel="stylesheet" href="~/Content/bootstrap-table.css" />
@section scripts
{
    <script src="~/Scripts/bootstrap-table.js" type="text/javascript"></script>
    <script src="~/Scripts/locales/bootstrap-table-zh-CN.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap.tables.js" type="text/javascript"></script>
    <script type="text/javascript">
        //設定傳入參數
        function queryParams(params) {
            return params;
        }
 
        //操作按鈕
        function operateFormatter(value, row) {
            return '<a href="@Url.Action(" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" Edit")/' + row.CompanyID + '"><i class="glyphicon glyphicon-edit"></i></a>&nbsp;&nbsp;' +
                '<a href="@Url.Action(" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" Delete")/' + row.CompanyID + '" οnclick="return confirm("确認删除？")"><i class="glyphicon glyphicon-remove"></i></a>';
        }
    </script>
}      

控制器代碼：

/// <summary>
/// 擷取資料
/// </summary>
/// <returns></returns>
[HttpPost]
public JsonResult GetPageData()
{
    //limit, offset, search, sort, order 
    //pageSize, pageNumber, searchText, sortName, sortOrder. 
    int pageSize = Convert.ToInt32(Request.Form["limit"]);
    int pageNumber = Convert.ToInt32(Request.Form["offset"]);
    string sortName = Request.Form["sort"];
    string sortOrder = Request.Form["order"];
    string searchText = Request.Form["search"];
 
    int total;
    var rows = String.IsNullOrEmpty(searchText)
        ? _service.GetPageData(sortName, sortOrder, pageNumber, pageSize, out total)
        : _service.GetPageData(m => m.CompanyName.Contains(searchText), sortName, sortOrder, pageNumber, pageSize,
            out total);
    var json = Json(new { total, rows }, JsonRequestBehavior.AllowGet);
    return json;
}
      

分頁代碼：

/// <summary>
/// 查找分頁資料清單
/// </summary>
/// <param name="pageNumber">目前頁</param>
/// <param name="pageSize">每頁記錄數</param>
/// <param name="totalRecord">總記錄數</param>
/// <param name="predicate">查詢表達式</param>
/// <param name="sortOrder">是否升序</param>
/// <param name="sortName">排序字段名稱</param>
/// <returns>執行個體清單</returns>
public IQueryable<T> GetPageData<TS>(Expression<Func<T, bool>> predicate, string sortName, string sortOrder,
    int pageNumber, int pageSize, out int totalRecord)
{
    _nContext.Configuration.LazyLoadingEnabled = false;
    _nContext.Configuration.ProxyCreationEnabled = false;
    var list = _nContext.Set<T>().Where<T>(predicate);
    totalRecord = list.Count();
    list = OrderBy(list, sortName, sortOrder == "asc").Skip(pageNumber * pageSize).Take(pageSize);
    _nContext.Configuration.LazyLoadingEnabled = true;
    _nContext.Configuration.ProxyCreationEnabled = true;
    return list;
}
 
/// <summary>
/// 查找分頁資料清單
/// </summary>
/// <param name="pageNumber">目前頁</param>
/// <param name="pageSize">每頁記錄數</param>
/// <param name="totalRecord">總記錄數</param>
/// <param name="sortOrder">是否升序</param>
/// <param name="sortName">排序字段名稱</param>
/// <returns>執行個體清單</returns>
public IQueryable<T> GetPageData<TS>(string sortName, string sortOrder, int pageNumber, int pageSize, out int totalRecord)
{
    _nContext.Configuration.LazyLoadingEnabled = false;
    _nContext.Configuration.ProxyCreationEnabled = false;
    var list = GetList();
    totalRecord = list.Count();
    list = OrderBy(list, sortName, sortOrder == "asc").Skip(pageNumber * pageSize).Take(pageSize);
    _nContext.Configuration.LazyLoadingEnabled = true;
    _nContext.Configuration.ProxyCreationEnabled = true;
    return list;
}
      

/// <summary>
/// 排序
/// </summary>
/// <typeparam name="T">類型</typeparam>
/// <param name="source">原IQueryable</param>
/// <param name="propertyName">排序屬性名</param>
/// <param name="isAsc">是否正序</param>
/// <returns>排序後的IQueryable<T/></returns>
private static IQueryable<T> OrderBy(IQueryable<T> source, string propertyName, bool isAsc)
{
    if (source == null) throw new ArgumentNullException("source", "不能為空");
 
    if (string.IsNullOrEmpty(propertyName)) return source;
 
    //Expression:提供一種基類，表示表達式目錄樹節點的類派生自該基類。
    //建立一個 ParameterExpression 節點，該節點可用于辨別表達式樹中的參數或變量。
    var parameter = Expression.Parameter(source.ElementType);
    //建立一個表示通路屬性的 MemberExpression
    var property = Expression.Property(parameter, propertyName);
    if (property == null) throw new ArgumentNullException("propertyName", "屬性不存在");
 
    var lambdaExpression = Expression.Lambda(property, parameter);
    var methodName = isAsc ? "OrderBy" : "OrderByDescending";
    var resultExpression = Expression.Call(typeof(Queryable), methodName, new[] { source.ElementType, property.Type }, source.Expression, Expression.Quote(lambdaExpression));
    return source.Provider.CreateQuery<T>(resultExpression);
}