Bootstrap Table - 服务端分页+客户端排序
注:自带的筛选的 Server/Client 模式,只能跟着分页走
引用的是bootstrap_table V1.17.1 版文件
<table id="table_HouseRecord" data-toggle="table" data-url="/Business/StuffMaterialManage/Biz_Stuff_ThirdpartyWeightTiqu/LoadMaterialHouseRecord" data-query-params="queryParams" data-search="true" data-cache="false" data-click-to-select="true" data-show-pagination-switch="false" data-pagination="true" data-pagination-loop="false" data-side-pagination="server" data-page-list="[10, 20, 50, 100, 200]" data-page-size="15" data-server-sort="false" data-response-handler="responseHandler" data-detail-view="true" data-detail-filter="detailFilter" data-detail-formatter="detailFormatter"> <thead> <tr> <th data-field="MaterialHouseName" data-sortable="true">货仓</th> <th data-field="BeforeValue">库存(前)</th> <th data-field="Value">调整值</th> <th data-field="AfterValue">库存(后)</th> <th data-field="DataNo" data-sortable="true">数据编号</th> <th data-field="CheNo" data-sortable="true">车号</th> <th data-field="MaterialName" data-sortable="true">材料名称</th> <th data-field="MaterialSpec" data-sortable="true">材料规格</th> <th data-field="Remark" data-sortable="true">描述</th> <th data-field="DataUserName" data-sortable="true">操作人</th> <th data-field="DataDateTime" data-sortable="true" data-formatter="changeDateFormat">时间</th> <th data-field="MixingNo" data-sortable="true">机组</th> <th data-field="IpcHouseNo" data-sortable="true">工控仓号</th> <th data-field="DataID" data-visible="false">序号</th> </tr> </thead> </table>
JS
function queryParams(params) { delete params.sort; delete params.order; params["dayDate"] = $("#lblDay").text(); params["houseId"] = curHouseCheck; return params; } function responseHandler(res) { if ($('#table_HouseRecord').bootstrapTable('getOptions').sortOrder === 'desc') { res.rows = res.rows.reverse(); } return res }
后端
[ExExceptionLog4netAjaxJsonResult] [ExLoadLoginInfo] public JsonResult LoadMaterialHouseRecord(string dayDate, int houseId) { int pageSize = int.Parse(Request["limit"]); int offset = int.Parse(Request["offset"]); int pageIndex = offset / pageSize + 1; dynamic data = _bll.LoadHouseRecordPage(dayDate, houseId, pageIndex, pageSize); return Json(data, JsonRequestBehavior.AllowGet); }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律