Dynamic Table JQuery Editting

https://stackoverflow.com/questions/20076118

31-07-2022
|

Question

I am totally newbie for JQuery but I need someone help for this part. I m dealing with a dynamic table from a template. I wish to remove the 10 records per page section but I have no idea how to do so. Anyone please?

Here is the HTML code which I still understandable

<table class="table table-striped border-top" id="sample_1">
        <thead>
          <tr>
            <!-- <th style="width:8px;"><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" /></th> -->
            <th>No</th>
            <th>Name</th>
            <th class="hidden-phone">Name</th>
            <th class="hidden-phone">Text</th>
            <th class="hidden-phone">Text</th>
            <th class="hidden-phone">Text</th>
          </tr>
        </thead>
        <tbody>
          <tr class="odd gradeX">
            <!-- <td><input type="checkbox" class="checkboxes" value="1" /></td> -->
            <td>1</td>
            <td>Jhone doe</td>
            <td class="hidden-phone"><a href="mailto:jhone-doe@gmail.com">jhone-doe@gmail.com</a></td>
            <td class="hidden-phone">10</td>
            <td class="center hidden-phone">02.03.2013</td>
            <td class="hidden-phone"><span class="label label-success">Approved</span></td>
          </tr>
          <tr class="odd gradeX">
            <!-- <td><input type="checkbox" class="checkboxes" value="1" /></td> -->
            <td>2</td>
            <td>dipsdf</td>
            <td class="hidden-phone"><a href="mailto:soa bal@gmail.com">lorem-ip@gmail.com</a></td>
            <td class="hidden-phone">33</td>
            <td class="center hidden-phone">05.04.2013</td>
            <td class="hidden-phone"><span class="label label-success">Approved</span></td>
          </tr>
        </tbody>
      </table>

Jquery part which I have no idea what it doing there

var Script = function () {

    // begin first table
    $('#sample_1').dataTable({
        "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
        "sPaginationType": "bootstrap",
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per page",
            "oPaginate": {
                "sPrevious": "Prev",
                "sNext": "Next"
            }
        },
        "aoColumnDefs": [{
            'bSortable': false,
            'aTargets': [0]
        }]
    });

    jQuery('#sample_1 .group-checkable').change(function () {
        var set = jQuery(this).attr("data-set");
        var checked = jQuery(this).is(":checked");
        jQuery(set).each(function () {
            if (checked) {
                $(this).attr("checked", true);
            } else {
                $(this).attr("checked", false);
            }
        });
        jQuery.uniform.update(set);
    });

    jQuery('#sample_1_wrapper .dataTables_filter input').addClass("form-control"); // modify table search input
    jQuery('#sample_1_wrapper .dataTables_length select').addClass("form-control"); // modify table per page dropdown}();

I am trying to link the table with display data from database while replacing the 10 records per page section with an add button there. Anyone please.

Appreciate.

Solution

If you're just trying to list all the records at once (plus hide the option to change number show per page) you have to disable pagination.

Add the following option to your datatables call.

"bPaginate": false