Clever Geek Handbook

HTML form not displaying all checkboxes from Bootstrap loading table

I have a table that displays the results of my DB. In the last column I have checkboxes and by clicking the submit button I am sending the account_id array to another php file. Everything works fine, but the problem is that I am using Bootstrap's bootstrap table which can display 10-100 results per page and the form only captures the results on the current page. If I check the boxes on different pages and switch between them, they still remain checked. Here is my HTML:

<form action="compare.php" method="post">
<table class="table table-hover" id="dataTables-example">

    <thead>
        <tr>
            <th style="text-align:center;">Account name</th>
            <th style="text-align:center;">Address</th>
            <th style="text-align:center;">Phone number</th>
            <th style="text-align:center;">Website</th>
            <th style="text-align:center;">Compare</th>
        </tr>
    </thead>
    <tbody>                                
        <?php 
        $result= mysql_query("select * from accounts order by account_name ASC" ) or die (mysql_error());
        while ($row= mysql_fetch_array ($result) ){                                 
        ?>
        <tr>
            <td class='clickable-row' data-href="select.php?id=<?php echo $row ['account_id'];?>"> <?php echo $row ['account_name'];?></td>
            <td class='clickable-row' data-href="select.php?id=<?php echo $row ['account_id'];?>"> <?php echo $row ['address']; ?></td>
            <td class='clickable-row' data-href="select.php?id=<?php echo $row ['account_id'];?>"> <?php echo $row ['phone_number']; ?></td>
            <td class='clickable-row' data-href="select.php?id=<?php echo $row ['account_id'];?>"> <?php echo $row ['website']; ?></td>
            <td> <input type="checkbox" name="checkboxvar[]" value="<?php echo $row ['account_id'];?>" /></td>
        </tr>
        <?php } ?>

    </tbody>
</table>
<input class="btn btn-success" type="submit" value="Compare" id="submit">
</form>

I tried using jQuery to see if it can display checkboxes from the entire table, but the results are similar to trying an HTML form. This script should grab them and issue a warning:

<button id="bt1">Get</button>

<script>

$('#bt1').on('click', function () {
//Get checked checkboxes
var checkedCheckboxes = $("#dataTables-example :checkbox:checked"),
    arr = [];

//For each checkbox
for (var i = 0; i < checkedCheckboxes.length; i++) {

    //Get checkbox
    var checkbox = $(checkedCheckboxes[i]);

    //Get checkbox value
    var checkboxValue = checkbox.val();

    //Get siblings
    var siblings = checkbox.parent().siblings();

    //Get values of siblings
    var value1 = $(siblings[0]).text();
    var value2 = $(siblings[1]).text();

    arr.push(checkboxValue + '-' + value1 + '/' + value2);
     alert(checkboxValue + '-' + value1 + '/' + value2);
}
});

</script>

Is there a way to do this?

+3


source to share


2 answers


Resolved!

Include this script:

<script type="text/javascript" src="//cdn.datatables.net/plug-ins/f2c75b7247b/api/fnGetHiddenNodes.js"></script>


And this insertion of this function:

<script>
$(document).ready(function() {
oTable = $('#yourTableID').dataTable();

$('form').submit(function(){
   $(oTable.fnGetHiddenNodes()).find('input:checked').appendTo(this);
}); 
});
</script>

All checkboxes are captured by clicking the Submit button.

0


source


You can use Datatables object:



$('input', oTable.fnGetNodes()).each(function () {
  if($(this).is('checked')){
    console.log($(this).val());
  }
});
+1


source






More articles:


All Articles