zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    mysql双主配置
    nginx js、css多个请求合并为一个请求(concat模块)
    PHP中利用Redis管道加快执行
    总结最近游戏中活动出现被刷问题。
    问题记录--负载均衡的均衡器配置了高可用导致问题
    php的session获取不到问题之ie浏览器(yaf框架)
    Django URLs error: view must be a callable or a list/tuple in the case of include()
    在Sublime Text运行Python.How to run Python code from Sumblime Text
    JavaWeb项目自动化部署测试学习
    hadoop2.5.1+hbase1.1.2安装与配置
  • 原文地址:https://www.cnblogs.com/feihong84/p/5747775.html
Copyright © 2011-2022 走看看