更改分页切换时的引导程序表数据重置

我遇到了一个问题，它在点击或选择分页更改时重置列中的所选条目。更改分页切换时的引导程序表数据重置

例如。首先，我将ma数据显示在表格中，并在col中有一个选择框。有很多页面可以显示（1，2，3）我更改页面＃1中选择框的内容，然后点击分页切换。内容被重置（它不会保留我的选择）。

data-maintain-selected="true"

我希望在分页改变后保留这一个，但不是。有没有办法保存这些数据？

感谢您的帮助。

<!DOCTYPE html> 
<html> 

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Untitled</title> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css"> 
<link rel="stylesheet" href="assets/css/styles.css"> 
</head> 

<body> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> 
<script type="text/javascript"> 
    function pagin() { 
    $("#table").bootstrapTable("togglePagination"); 
    } 
</script> 
<div id="page_body"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="fpbx-container"> 
      <div class="display full-border"> 
      <button onclick="pagin()"> 
       Pagination On/Off 
      </button> 

      <table id="table" data-show-toggle="True" data-maintain-selected="true" data-pagination="True" class="table table-striped"></table> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>  

</body> 

</html>

和JavaScript的负载。

$('#table').bootstrapTable({ 
columns: [{ 
    field: 'id', 
    title: 'Item ID' 
}, { 
    field: 'name', 
    title: 'Item Name' 
}, { 
    field: 'price', 
    title: 'Item Price' 
}], 
data: [{ 
    id: 1, 
    name: 'Item 1', 
    price: '<select><option value="10">$10</option><option value="20">$20</option></select>' 
}, { 
    id: 2, 
    name: 'Item 2', 
    price: '<select><option value="10">$10</option><option value="20">$20</option></select>' 
}] 
});

的jsfiddle： https://jsfiddle.net/fdanard/n0ky502r/3/

如果有人想帮助我并避免删除和修改我的线程。 :)

来源

2017-12-18 Danard

请发表您的代码，请参阅https://stackoverflow.com/help/mcve – beaver

它这样做，但无人接听。 – Danard

maintainSelected是关于保持复选框的选择，就像在这个小提琴中：https://jsfiddle.net/beaver71/hgLzx0c0/ – beaver

该数据应严格为该表的数据。任何HTML对象或数据列中的特殊格式都可以使用格式化程序（数据格式化程序）来设置

function formatForks(value, row, index) { 

    var selectCode = '<select>'; 
    var forksAllowed = [0, 10, 20, 30]; 

    forksAllowed.forEach(function(ii) { 
selectCode += '<option value="' + ii + '"' + (value==ii?' selected ':'') +'>$' + ii + '</option>';

}）;

selectCode += '</select>' 
    return selectCode; 
}

看到这样的jsfiddle - note the forksFormatter function

来源

2018-01-28 20:51:26

好的，但是当你点击分页切换时，这个例子是否保留了选定的数据？没有！ :( – Danard

是的 - 您需要添加更新功能，例如显示添加选择框的正确方法，也可以使用可编辑的扩展。 –

更改分页切换时的引导程序表数据重置

回答

相关问题