Speichern von Tabellenzeilenauswahlen über mehrere Seiten hinweg

Question

Ich habe eine Suchergebnistabelle mit einem Kontrollkästchen, mit dem Benutzer eine oder mehrere Zeilen auswählen können. Dies funktioniert derzeit auf einer einzelnen Seite. Allerdings muss ich die Seitenanzahl verwenden, um die Ergebnisse auf 20 Zeilen pro Seite zu beschränken. Sobald der Nutzer also auf die Schaltfläche Nächste Seite klickt, um zur zweiten Seite der Suchergebnisse zu gelangen, gehen seine Auswahlen verloren.

Gibt es eine Möglichkeit, ihre Auswahl von Seite zu Seite zu halten?

Hier ist ein Beispiel dafür, wie die Tabelle mit dem Skript erscheint, die eine versteckte Form Eingang setzt:

$(function() { 
 

 

 
    //column checkbox select all or cancel 
 
    $("input.select-all").click(function() { 
 
    var checked = this.checked; 
 
    $("input.select-item").each(function(index, item) { 
 
     item.checked = checked; 
 
    }); 
 
    // update the hidden input with the selected selectedProductIDs 
 
    var items = []; 
 
    $("input.select-item:checked:checked").each(function(index, item) { 
 
     items[index] = item.value; 
 
    }); 
 
    if (items.length < 1) { 
 
     $('#selectedProductIDs').val(''); 
 
    } else { 
 
     var values = items.join(','); 
 
     $('#selectedProductIDs').val(values); 
 
    } 
 
    }); 
 

 
    //check selected items 
 
    $("input.select-item").click(function() { 
 
    var checked = this.checked; 
 
    console.log(checked); 
 
    checkSelected(); 
 
    // update the hidden input with the selected assetIDs 
 
    var items = []; 
 
    $("input.select-item:checked:checked").each(function(index, item) { 
 
     items[index] = item.value; 
 
    }); 
 
    if (items.length < 1) { 
 
     $('#selectedProductIDs').val(''); 
 
    } else { 
 
     var values = items.join(','); 
 
     $('#selectedProductIDs').val(values); 
 
    } 
 

 
    }); 
 

 
    //check is all selected 
 
    function checkSelected() { 
 
    var all = $("input.select-all")[0]; 
 
    var total = $("input.select-item").length; 
 
    var len = $("input.select-item:checked:checked").length; 
 
    console.log("total:" + total); 
 
    console.log("len:" + len); 
 
    all.checked = len === total; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
 
<table class="table table-condensed table-striped table-bordered"> 
 
    <thead> 
 
    <th><input type="checkbox" class="select-all checkbox" name="select-all" /></th> 
 
    <th class="text-center" scope="col">Product ID</th> 
 
    <th class="text-center" scope="col">Description</th> 
 
    </thead> 
 
    <tbody> 
 

 
    <tr class="" id="85799"> 
 
     <td><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36288" /></td> 
 
     <td>12345</td> 
 
     <td>Apples</td> 
 
     <td></td> 
 
    </tr> 
 
    <tr class="" id="85800"> 
 
     <td><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36289" /></td> 
 
     <td>67890</td> 
 
     <td>Bananas</td> 
 
     <td></td> 
 
    </tr> 
 
    <tr class="" id="85801"> 
 
     <td><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36290" /></td> 
 
     <td>55441</td> 
 
     <td>Oranges</td> 
 
     <td></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<form class="form-horizontal" id="processSelections" action="processSelections.php" method="post" role="form"> 
 
    <input type="hidden" name="selectedProductIDs" id="selectedProductIDs" value=""> 
 

 
    <div> 
 

 
    <div class="text-center"> 
 
     <button type="submit" name="buttonType" value="createShipments" id="save" class="btn btn-success">Process Selections</button> &nbsp; &nbsp; 
 
    </div> 
 
    </div> 
 

 
</form>

Answer 1

ich die AJAX-Skript eine PHP-Seite aufrufen, die am Ende, die eine $ aktualisiert _SESSION-Variable mit den ausgewählten Elementen, so dass dies von Seite zu Seite beibehalten würde.