更改分頁切換時的引導程序表數據重置

我遇到了一個問題，它在點擊或選擇分頁更改時重置列中的所選條目。更改分頁切換時的引導程序表數據重置

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

是的 - 您需要添加更新功能，例如顯示添加選擇框的正確方法，也可以使用可編輯的擴展。 –

更改分頁切換時的引導程序表數據重置

回答

相關問題