翻页时bootstrap-switch样式失效

bootstrap-switch真TM的满满都是槽点,坑之多,全网吐槽。

首先是,只有第一行能够显示标图的问题。

连续相同状态的多行数据只有第一个显示按钮

然后是,不能正常初始化的问题。

解决bootstrap-switch开关按钮不能正常初始化问题

向上述前仆后继的同志们致敬。

然后,碰到了第三个问题,bootstrap-table中当数据分页时,翻页以后,bootstrap-switch的效果,就消失了,图表不显示了……这个问题坑到网上我竟然没找到解决方法。

好吧,该我入坑了。

其实解决起来也简单。

bootstrap-table中有一个函数叫,onPageChange(),搭配OnLoadSuccess()使用,效果更佳。

method: 'get',
                url: "/net/"+state+"?start="+StartSearch+"&&end="+EndSearch+"&&wangduan="+mWD, //获取数据的Servlet地址
                queryParams: function queryParams(params) {   //设置查询参数              
                    var param = {                    
                        pageNumber: params.pageNumber,                    
                        pageSize: params.pageSize,                              
                        };                
                return param;                            
                },

                cache: false,
                //height: 750, 
                striped: true,
                pagination: true, 
                silent: true, //以静默方式刷新数据
                toolbar:"#toolbar",
                locale:"zh-US", //表格汉化
                sidePagination: "client",
                pageSize: 10,
                pageNumber:mPage,
                pageList: [10, 14,15, 16, 18,20],
                search: true,
                showColumns: true,
                showRefresh: true,
                showExport: true,
                exportDataType: 'all', 
                clickToSelect: true,
                exportTypes:[ 'excel','xlsx','doc','csv', 'txt', 'sql' ],
                exportOptions:{  
                    //ignoreColumn: [12,14],            //忽略某一列的索引  
                    fileName: '数据导出',              //文件名称设置  
                    worksheetName: 'Sheet1',          //表格工作区名称  
                    tableName: 'IP数据表',  
                    excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],  
                    //onMsoNumberFormat: DoOnMsoNumberFormat  
                },
                columns : [],
                onLoadSuccess: function(){
                    //{#    初始化switch开关按钮#}
                        initSwitch();
                    },
                onPageChange: function(){
                    //{#    初始化switch开关按钮#}
                        initSwitch();
                    },
            });


    function initSwitch(){
        $("[]").bootstrapSwitch({
             onText : "入网",      // 设置ON文本  
            offText : "退出",    // 设置OFF文本   
/*             onColor : "success",// 设置ON文本颜色(info/success/warning/danger/primary)  
            offColor : "warning",  // 设置OFF文本颜色 (info/success/warning/danger/primary)  */  
            size : "small",    // 设置控件大小,从小到大  (mini/small/normal/large)  
            
            // 当开关状态改变时触发  
            onSwitchChange : function(event, state) {  
                if (state == true) { 
                    //alert("入网");
                    loginPermit("入网",this.value);
                } else {
                    //alert("退出");
                    loginPermit("退出",this.value);
                }  
            }  
        });
    }
    
   //状态栏事件定义
    function project_status(value, row, index) {
         if("入网"==value){
            return "<input type='checkbox' checked  name='mycheck' value='"+row.主键值+"'>";
        }else{
            return "<input type='checkbox'  name='mycheck' value='"+row.主键值+"'>";
        } 
    }

根绝这么看来,虽然是在client模式下,但是一开始的onLoadSuccess(),应该只加载了第一页的数据,翻页就刷新一遍数据,虽然不是从服务器端取值。因此,在每次翻页的时候,我们就重新加载一遍样式吧。

原文:https://blog.csdn.net/baidu_31788709/article/details/104344858