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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

例如。 首先，我将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/

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

回答：

该数据应严格为该表的数据。任何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

以上是 更改分页切换时的引导程序表数据重置 的全部内容， 来源链接： utcz.com/qa/263851.html

回到顶部