ページ区切りトグルが変更されたときにブートストラップテーブルのデータがリセットされる

ページの変更をクリックまたは選択するときに、選択した項目を列でリセットする問題に直面しています。ページ区切りトグルが変更されたときにブートストラップテーブルのデータがリセットされる

たとえば、最初はテーブルに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

はい - 更新機能を追加する必要があります。この例は、選択ボックスを追加する適切な方法を示したものです。また、編集可能な拡張機能を使用することもできます。 –

ページ区切りトグルが変更されたときにブートストラップテーブルのデータがリセットされる

答えて

関連する問題