Bootstrap table multi-marquee paging retention

When using the check box function of bootstrap table, because of the service end paging, when the first page selected some data, and then click on the second page to select some data, again point to the first page, found that the original selected data has been emptied, the original multi-box does not support paging to retain the multi-selection data.

Solution: At the time of paging, the original selection of the data is saved with a global variable, when the page back again, to determine whether the current data exists in the data in the saved array, the presence of the state is selected. Of course, when you deselect it, delete the corresponding data in the array.

To solve this problem, check the documentation on GitHub to find out someone raised the issue, and author Wenzhixin also wrote a corresponding example to show, want to see the original problem click Open link.

Click to open the link to see the example directly

The original example is a table that is implemented in HTML and uses service-side paging. and the relevant JS method is not perfect, I also stepped on a lot of pits, so this blog in the original author of the example written on the basis of the relevant changes, in this show and explain:

[javascript]  View plain  copy var  $table;   var selectionids = [];   //Save selected ids   $ (function  ()  {        $table  = $ (" #example1 "). Bootstraptable ({           contenttype:" Application/x-www-form-urlencoded; charset=utf-8 ",      //initialization code             url: ' <%=basepath%>/order/queryorderlist ',            method:  ' Post ',            striped:true,           //odd-even line fade-color table             pagination:true,         //Display Paging            clickToSelect:true,      //Check whether            maintainSelected:true,            sidePagination:  "Server",     //service-side paging            idfield: "id",            pageSize: 10,           responsehandler: responsehandler, //the method that is executed before the page data is rendered, this configuration is important!!!!!!!            columns: [                {field:  ' CheckStatus ',checkbox: true},   //assigns a field value of "CheckStatus" to the marquee to change the selection state!!!!!                {field:  ' id ', visible: false},                {field:  ' OrderNumber ', Title:&nbsP; " Order number ", align: ' center ', Width: ' 10% '}           ]       });       //Select event Action Array         Var union = function (array,ids) {           $. Each (ids, function  (i, id)  {                if ($.inarray (Id,array) ==-1) {                    array[array.length] = id;                }                 });                return array;       };        //CancelSelect event Action Array        var difference = function (array,ids) {               $.each (ids, function  (i,  id)  {                     var index = $.inarray (Id,array);