Search code examples
jqueryrowbootstrap-table

Save selected row on bootstrap-table


I Have a problem with bootstrap-table

I need my bootstrap-table to remember options of the table and selected row because when I refresh the page I want the same options, I want the table reselects the same row, the same page of the las selection. Is there a way to save the table status?

<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>

Solution

  • $("#tableConttatti").click(function(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;
    

    }

    $(document).ready(function() {

    tableConttatti.bootstrapTable({
        url: "_elabPost.php?Inst=GETCONTATTI",
        pageSize: localStorage.getItem("length"),
        pageNumber: localStorage.getItem("page"),
        onLoadSuccess: function() {
            getSelectedRow()
        }
    
    
    });
    

    function 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;
        }
    }
    

    }