首页 > > 网络编程 > Asp.Net编程 >

bootstrap table 分页后,重新搜索的问题

2018-06-22 06:02:36来源：未知阅读 ()

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

现象:当搜索充气娃娃的时候返回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>