bootstrap table保留多选框的分页

          initialize : function(options) {
			this.options = options.options;
			this.tableNum=options.tableNum;
			this.selectActive=[];
			this.selections=[];
			this.selectionIds=[];
			this.nowPage;
			this.selectPage=[];
			Table.prototype.initialize.call(this, this.options);
		},

		render : function() {
			var _this = this;
			// 创建table节点
			this.$table = $("<table>");
			this.$el.html(this.$table);              //注意这里
			function responseHandler(res) {
			    	$.each(res.rows, function (i, row) {
			              row.checkStatus = $.inArray(row.id, this.selectionIds) != -1;  //判断当前行的数据id是否存在与选中的数组,存在则将多选框状态变为true
			          });
			          return res;
			};
			// 初始化表格
			this.$table.bootstrapTable({
				locale : ‘zh-CN‘,
				pagination : true,
				// 默认表格数据排序字段
				sortName : "",
				sortOrder : "",
				idField:"id",//这里
				pageNumber : _this.tableNum,//这是第几页
				pageSize : 10,
				pageList : [],
				sidePagination : ‘server‘,
				maintainSelected:true,
				ajax : $request,
				url : $request.api + "/patents/query?",
				queryParams : function(params) {
					params["columns"] = "applyDate,name,publicDate,inventor,id,updateTime,type,ipcNumber,source,recommended,intentions,price,state,attentions,applyNumber,name,patentee,pageview,transactionType,createType,creator,topTime,createTime";
					// 是否有附加参数
					if ($.isFunction(_this.getQueryParams)) {
						params = $.extend(params, _this.getQueryParams());
					}
					_this.nowPage=params.offset/10;
					return params;
				},
				clickToSelect : true,
				responseHandler : responseHandler,
				columns : [{
				    field: ‘checkStatus‘,checkbox: true,
				}, {field: ‘id‘,visible:false},
				{
					title : ‘序号‘,
					formatter : function(value, row, index) {
						return index + 1;
					}
				},
				}]
			});
			//通过全部选中数据进行元素获取
			this.showCheck();
			//获取到全部选中的数据
			this.clickget()
			return this;
		},
		   clickget:function(){
		       var mark;
		       var _this=this;
		       var union = function(array,ids){
			     $.each(ids, function (i, id) {
			            if($.inArray(id,array)==-1){
			                array[array.length] = id;
			            }
			     });
			     return array;
		       };
		       //取消选中事件操作数组
		       var difference = function(array,ids){
			   $.each(ids, function (i, id) {
			                 var index = $.inArray(id,array);
			                 mark=index;
			                 if(index!=-1){
			                     array.splice(index, 1);
			                 }
			             });
			    return array;
		       };
		       var unions = function(arrays,rowa){
			     $.each(rowa, function (i, row) {
			            if($.inArray(row,arrays)==-1){
			                arrays[arrays.length] = row;
			            }
			     });
			     return arrays;
		       };
		       var differences = function(arrays,rowa){
			   $.each(rowa, function (i, row) {  

			                 if(mark!=-1){
			                     arrays.splice(mark, 1);
			                 }
			             });

			    return arrays;
		       };
		       //绑定选中事件、取消事件、全部选中、全部取消
		       this.$table.on(‘check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table‘, function (e, rows) {
			   	var _ = {"union":union,"difference":difference};
			   	var aa= {"unions":unions,"differences":differences};
		                var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
		                        return row.id;
		                });
		                var rowa= $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
		                        return row
		                });
		                func = $.inArray(e.type, [‘check‘, ‘check-all‘]) > -1 ? ‘union‘ : ‘difference‘;
		                funcs = $.inArray(e.type, [‘check‘, ‘check-all‘]) > -1 ? ‘unions‘ : ‘differences‘;
		                _this.selectionIds = _[func](_this.selectionIds, ids);
		                _this.selection = aa[funcs](_this.selections, rowa);  

		        })
		   },
		   showCheck:function(){//当分页点击的时候显示之前的选择
			    var _this=this;
			    this.$(".bootstrap-table").on(‘post-body.bs.table‘, function () {
				for(var i=0;i<_this.selectionIds.length;i++){
				    _this.$("input[value="+_this.selectionIds[i]+"]").attr("checked",true);
				}
			    });
			},
时间: 2025-01-19 13:09:30

bootstrap table保留多选框的分页的相关文章

Bootstrap系列 -- 17. 复选框checkbox和单选择按钮radio

Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题).使用Bootstrap框架,开发人员无需考虑太多. <form role="form"> <h3>案例1</h3> <div class="checkbox"> <label> <input typ

elementUITable的多选框:分页选择数据回显,分页保存选中的数据。

<template> <el-table @selection-change="handleSelectionChange" :row-key="getRowKeys"> <!--type必须是selection的一列设置reserve-selection属性--> <el-table-column type="selection" :reserve-selection="true"

BootStrap table使用

bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="../bower_compon

bootstrap table的属性sidePagination设置不当导致数据不显示

使用bootstrap table,某个页面不需要分页,就将参数 pagination设置为了 false. 想想既然不用分页了,干脆分页方式也删掉吧,结果莫名的结果是"没有找到匹配的记录",而前端调试看Network内容,明明返回了两条数据. 折腾半天后,逐步回退代码,才发现必须要sidePagination存在,且值为: "server", 如果配置为"client"也不显示数据. 原文地址:https://www.cnblogs.com/G

bootstrap table 服务器端分页--ashx+ajax

1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <link rel="

Bootstrap之表格checkbox复选框全选

效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: [html] view plain copy <table class="table table-bordered table-hover"> <thead> <tr class="success"> <th>类别编号</th> <th>类别名称</th> <th>类别组<

ASP.NET实现弹出框真分页将复选框选择的数据存到数据库中(一)

ASP.NET实现弹出框真分页将复选框选择的数据存到数据库中,这个问题分一下几步走 1.将弹出框真分页后复选框选择的数据保存. 2.将弹出框保存的数据传到父页面上. 3.将数据在父页面上显示. 4.点击保存将信息存入数据库中. 首先来第一步将弹出框真分页后复选框选择的数据保存. 思路很简单就是先真分页,然后在点击下一页的时候扫描这一页所有点击复选框的数据保存到一个变量数组中.下面就是主要代码: ASP代码: <%@ Page Language="C#" AutoEventWire

Bootstrap之表格checkbox复选框全选 [转]

转自: http://blog.csdn.net/shangmingchao/article/details/49761315 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: [html] view plain copy <table class="table table-bordered table-hover"> <thead> <tr class="success"> <

bootstrap table 服务端分页

前端js $(function () { //$('#MDTable').bootstrapTable('destroy'); $("#MDTable").bootstrapTable({ //'destroy' 是必须要加的==作用是加载服务器数据,初始化表格的内容Destroy the bootstrap table. toolbar: '#toolbar', //工具按钮用哪个容器 method: 'get', url: "/MD_All/MD_Data",