最近研究bootstrap，它僅提供視覺效果，對於資料列表之類的並未涉及，網上找了一下，找到一個Table外掛。

名為bootstrapTable。

因為英文差，研究了半天，做了一個demo，將就看

HTML:

<table class="table" id="dataShow" >
         <thead>
             <tr>
                 <th data-checkbox="true">選擇</th>
                 <th data-field="rkey">供應商名稱</th>
                 <th data-field="rkey">供應商編碼</th>
                 <th data-field="name">物料編碼</th>
                 <th data-field="sex">申請型別</th>
                 <th data-field="birthdayString">試用申請編碼</th>
                 <th data-field="age">試用狀態</th>
                 <th data-field="age">廠別</th>
                 <th data-field="age">審批狀態</th>
                 <th data-field="birthday">申請時間</th>
                 <th data-field="age">試用結果</th>
             </tr>
         </thead>
    </table>
 

var currPageIndex = 0;
        var currLimit = 10;

        $(function () {
            $("#dataShow").bootstrapTable({
                url: "TradHandler.ashx?request=getTradList",
                sortName: "rkey",//排序列
                striped: true,//條紋行
                sidePagination: "server",//伺服器分頁
                //showRefresh: true,//重新整理功能
                //search: true,//搜尋功能
                clickToSelect: true,//選擇行即選擇checkbox
                singleSelect: true,//僅允許單選
                //searchOnEnterKey: true,//ENTER鍵搜尋
                pagination: true,//啟用分頁
                escape: true,//過濾危險字元
                queryParams: getParams,//攜帶引數
                pageCount: 10,//每頁行數
                pageIndex: 0,//其實頁
                method: "get",//請求格式
                //toolbar: "#toolBar",
                onPageChange: function (number, size) {
                    currPageIndex = number;
                    currLimit = size
                },
                onLoadSuccess: function ()
                {
                    $("#searchBtn").button('reset');
                }
            });

            //搜尋
            $("#searchBtn").click(function () {
                $(this).button('loading');
                var nullparamss = {};
                $("#dataShow").bootstrapTable("refresh", nullparamss);
                
            });
            //enter鍵搜尋
            $("#searchKey").keydown(function (event) {
                if (event.keyCode == 13)
                {
                    $("#searchBtn").click();
                }
            });
            //阻止enter鍵提交表單
            $("#mainForm").submit(function () {
                return false;
            });

            
        });
        //預設載入時攜帶引數
        function getParams(params) {
            var searchKey = $("#searchKey").val();
            return { bysex: 1, limit: params.limit, offset: params.offset, search: searchKey };
        }
 

/// <summary>
        /// 獲取批量資料示例
        /// </summary>
        /// <param name="context"></param>
        private void getTradList(HttpContext context)
        {
            //用於序列化實體類的物件
            JavaScriptSerializer jss = new JavaScriptSerializer();

            #region 模擬資料獲取
            List<SimpleModel> list = new List<SimpleModel>();
            for (int i = 0; i < 1000; i++)
            {
                list.Add(new SimpleModel() { age = 18, name = "小李" + i, rkey = i + 1, sex = "男" });
            }


            //請求中攜帶的條件
            string bysex = context.Request.Params["bysex"];
            string searchKey = context.Request.Params["search"];

            //請求中攜帶的頁數和下標
            int dataIndex = Convert.ToInt32(context.Request.Params["offset"]);
            int pageCount = Convert.ToInt32(context.Request.Params["limit"]);

            //查詢滿足條件的資料
            List<SimpleModel> getList;
            if (bysex != null && searchKey != null)
            {
                getList = (from p in list
                           where p.sex == (bysex == "0" ? "女" : "男") && p.name.Contains(searchKey.Trim())
                           select p).ToList();
            }
            else
            {
                getList = list;
            }
            #endregion

            //將結果增加一列序號列
            Dictionary<int, SimpleModel> testModel = new Dictionary<int, SimpleModel>();
            for (int i=0;i< getList.Count;i++)
            {
                testModel.Add(i + 1, getList[i]);
            }
            
            //給分頁實體賦值
            PageModels<SimpleModel> model = new PageModels<SimpleModel>();
            model.total = getList.Count;
            if (getList.Count % pageCount == 0)
                model.page = getList.Count / pageCount;
            else
                model.page = (getList.Count / pageCount) + 1;

            //獲取對應頁的資料
            model.rows = testModel.Where(t => t.Key > dataIndex && t.Key <= dataIndex + pageCount).Select(t => t.Value).ToList();

            //將查詢結果返回
            context.Response.Write(jss.Serialize(model));
        }
 

有同學問pagemodel實體類，這裡也分享一下，泛型實體類，因為該外掛需要這些屬性才能正常自動繫結

 [Serializable]
    public class TablePageModel<T>
    {
        /// <summary>
        /// 總行數
        /// </summary>
        public long total { get; set; }

        /// <summary>
        /// 總頁數
        /// </summary>
        public int page { get; set; }

        private List<T> _rows;
        /// <summary>
        /// 資料來源
        /// </summary>
        public List<T> rows
        {
            get
            {
                if (_rows == null)
                    _rows = new List<T>();
                return _rows;
            }
            set
            {
                _rows = value;
            }
        }
    }