在 bootstrap-table 上保存所选行
Save selected row on bootstrap-table
我对 bootstrap-table
有疑问
我需要 bootstrap-table 来记住 table 和选定行的选项,因为当我刷新页面时我想要相同的选项,
我希望 table 重新选择同一行,las 选择的同一页。
有没有办法保存 table 状态?
<div class="tab-content">
<div class="tab-pane active" id="idContatti">
<div class="table-responsive" ">
<!--data-pagination="true"-->
<table id="tableConttatti" data-state-save="true" data-state-save-id-table="save" data-height="500" data-id-field="Codice" data-click-to-select="true" data-show-pagination-switch="true" data-pagination="true" data-search="true" data-row-style="rowStyle">
<thead>
<tr>
<th data-field="state" data-radio="true"></th>
<th data-field="__rank" data-sortable="true" data-halign="center" data-align="center">N.</th>
<th data-field="societa" data-sortable="true" data-halign="center" data-align="center">societa</th>
<th data-field="partitaIva" data-sortable="true" data-halign="center" data-align="center">P.Iva</th>
<th data-field="codiceFiscale" data-sortable="true" data-halign="center" data-align="center">Codice Fiscale</th>
<th data-field="indirizzo"data-sortable="true" data-halign="center" data-align="center">indirizzo</th>
<th data-field="citta" data-sortable="true" data-halign="center" data-align="center">citta</th>
<th data-field="telefono1" data-sortable="true" data-halign="center" data-align="center">telefono1</th>
<th data-field="cellulare" data-sortable="true" data-halign="center" data-align="center">cellulare</th>
<th data-field="fax" data-sortable="true" data-halign="center" data-align="center">fax</th>
<th data-field="email" data-sortable="true" data-halign="center" data-align="center">email</th>
</tr>
</thead>
</table>
</div>
</div>
$("#tableConttatti").click(函数(id, row, index) {
var nR = tableConttatti.bootstrapTable('getSelections')[0];
var options = tableConttatti.bootstrapTable('getOptions');
console.log("pagina=", options.pageNumber);
console.log("lunghezza=", options.pageSize);
var riga = localStorage.setItem("row", nR.__rank);
var pagina = localStorage.setItem("page", options.pageNumber);
var lunghezza = localStorage.setItem("length", options.pageSize);
return true;
}
$(文档).ready(函数() {
tableConttatti.bootstrapTable({
url: "_elabPost.php?Inst=GETCONTATTI",
pageSize: localStorage.getItem("length"),
pageNumber: localStorage.getItem("page"),
onLoadSuccess: function() {
getSelectedRow()
}
});
函数 getSelectedRow() {
var riga_sel = localStorage.getItem("row");
console.log("riga_sel", riga_sel);
var tr = document.getElementsByTagName("tr");
var td = document.getElementsByClassName("td");
for (var i = 0; i < tr.length; i++) {
if (tr[i].cells[1].innerText == riga_sel) {
console.log(tr[i]);
$(tr[i]).addClass("selected");
return;
}
}
}
我对 bootstrap-table
有疑问我需要 bootstrap-table 来记住 table 和选定行的选项,因为当我刷新页面时我想要相同的选项, 我希望 table 重新选择同一行,las 选择的同一页。 有没有办法保存 table 状态?
<div class="tab-content">
<div class="tab-pane active" id="idContatti">
<div class="table-responsive" ">
<!--data-pagination="true"-->
<table id="tableConttatti" data-state-save="true" data-state-save-id-table="save" data-height="500" data-id-field="Codice" data-click-to-select="true" data-show-pagination-switch="true" data-pagination="true" data-search="true" data-row-style="rowStyle">
<thead>
<tr>
<th data-field="state" data-radio="true"></th>
<th data-field="__rank" data-sortable="true" data-halign="center" data-align="center">N.</th>
<th data-field="societa" data-sortable="true" data-halign="center" data-align="center">societa</th>
<th data-field="partitaIva" data-sortable="true" data-halign="center" data-align="center">P.Iva</th>
<th data-field="codiceFiscale" data-sortable="true" data-halign="center" data-align="center">Codice Fiscale</th>
<th data-field="indirizzo"data-sortable="true" data-halign="center" data-align="center">indirizzo</th>
<th data-field="citta" data-sortable="true" data-halign="center" data-align="center">citta</th>
<th data-field="telefono1" data-sortable="true" data-halign="center" data-align="center">telefono1</th>
<th data-field="cellulare" data-sortable="true" data-halign="center" data-align="center">cellulare</th>
<th data-field="fax" data-sortable="true" data-halign="center" data-align="center">fax</th>
<th data-field="email" data-sortable="true" data-halign="center" data-align="center">email</th>
</tr>
</thead>
</table>
</div>
</div>
$("#tableConttatti").click(函数(id, row, index) {
var nR = tableConttatti.bootstrapTable('getSelections')[0];
var options = tableConttatti.bootstrapTable('getOptions');
console.log("pagina=", options.pageNumber);
console.log("lunghezza=", options.pageSize);
var riga = localStorage.setItem("row", nR.__rank);
var pagina = localStorage.setItem("page", options.pageNumber);
var lunghezza = localStorage.setItem("length", options.pageSize);
return true;
}
$(文档).ready(函数() {
tableConttatti.bootstrapTable({
url: "_elabPost.php?Inst=GETCONTATTI",
pageSize: localStorage.getItem("length"),
pageNumber: localStorage.getItem("page"),
onLoadSuccess: function() {
getSelectedRow()
}
});
函数 getSelectedRow() {
var riga_sel = localStorage.getItem("row");
console.log("riga_sel", riga_sel);
var tr = document.getElementsByTagName("tr");
var td = document.getElementsByClassName("td");
for (var i = 0; i < tr.length; i++) {
if (tr[i].cells[1].innerText == riga_sel) {
console.log(tr[i]);
$(tr[i]).addClass("selected");
return;
}
}
}