你的位置:首页 > ASP.net教程

[ASP.net教程]bootstrap table 分页后,重新搜索的问题


前提: 自定义搜索且有分页功能,比如搜索产品名的功能.

现象:当搜索充气娃娃的时候返回100条记录,翻到第五页.  这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果.  也就是重新搜索后,pagenumber没有变.

按网上大部分说的:重新设置option就行了

$('#tableList').bootstrapTable({pageNumber:1,pageSize:10});

以上是解决不了这个问题。

正确做法是

$("#table").bootstrapTable('destroy');先要将table销毁,否则会保留上次加载的内容

TableObj.oTableInit();重新初使化表格。

 

全部JS

 <script type="text/javascript">    $(function () {      TableObj.oTableInit();      $("#btn_query").click(function () {        $("#tb_departments").bootstrapTable('destroy');        TableObj.oTableInit();      });      $("#btn_edit").click(function () {        $.messager.alert('提示', '请选择要删除的记录');      });      $("#btn_add").click(function () {        var actionUrl = "@Url.Action("_create")";        var param = {};        Tool.ShowModal(actionUrl, param, "新增");      })    });    var TableObj = {      //初始化Table      oTableInit: function () {        $('#tb_departments').bootstrapTable({          url: '/Department/GetDepartment', //请求后台的URL(*)          method: 'get', //请求方式(*)          toolbar: '#toolbar', //工具按钮用哪个容器          striped: true, //是否显示行间隔色          cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)          pagination: true, //是否显示分页(*)          sortable: false, //是否启用排序          sortOrder: "asc", //排序方式          // queryParams: TableObj.queryParams(this), //传递参数(*)          queryParams: function (params) {            return {              PagedIndex: this.pageNumber,              PagedSize: this.pageSize,              DeptName: $("#txt_search_departmentname").val(),            };          },          sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)          pageNumber: 1, //初始化加载第一页,默认第一页          pageSize: 5, //每页的记录行数(*)          pageList: [5, 10, 25, 50, 100], //可供选择的每页的行数(*)          search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大          strictSearch: true,          showColumns: true, //是否显示所有的列          showRefresh: true, //是否显示刷新按钮          minimumCountColumns: 2, //最少允许的列数          clickToSelect: true, //是否启用点击选中行          height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度          uniqueId: "deptID", //每一行的唯一标识,一般为主键列          idField: 'deptID',          showToggle: true, //是否显示详细视图和列表视图的切换按钮          cardView: false, //是否显示详细视图          detailView: false, //是否显示父子表          columns: [            {              //field: 'deptID',              //field: 'deptID',              checkbox: true            },            {              field: 'DeptName',              title: '部门名称'            }, {              field: 'CreateBy',              title: '添加人'            }, {              field: 'CreateDT',              title: '添加日期',              formatter: function (val) {                return val == 'undefined' || !val ? '-' : val.formatterString(false);              }            }          ]        });      }    };    //保存    function Save() {      Tool.SaveModal($('#tb_departments'));    }  </script>

View Code