Add Items per page option

Question

How to add an option like items per page with limit(dropdown with options 10,25,50) in the listing page. It should be like show entries option in bootstrap datatables. I am using twbspagination.js for pagination. This is the sample link js-tutorials and given below is the source code.

<body>
  <div class="container" style="padding:10px 20px;">
    <h2>Pagination Example Using jQuery</h2>
    
    <table id="employee" class="table table-bordered table table-hover" cellspacing="0" width="100%">
        <colgroup><col width="20%"><col width="35%"><col width="40%"></colgroup>
    <thead>
        <tr>
            <th>Name</th>
            <th >Salary</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody id="emp_body">
    </tbody>
    </table>
    <div id="pager">
        <ul id="pagination" class="pagination-sm"></ul>
    </div>
    
  </div>
</body>
<script type="text/javascript">
  $(document).ready(function(){
    
    var $pagination = $('#pagination'),
        totalRecords = 0,
        records = [],
        displayRecords = [],
        recPerPage = 10,
        page = 1,
        totalPages = 0;
           
    $.ajax({
        url: "https://www.js-tutorials.com/source_code/api_data/employee_all.php",
        async: true,
        dataType: 'json',
        success: function (data) {
            records = data;
            console.log(records);
            totalRecords = records.length;
            totalPages = Math.ceil(totalRecords / recPerPage);
            apply_pagination();
        }
    });
    function generate_table() {
        var tr;
        $('#emp_body').html('');
        for (var i = 0; i < displayRecords.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + displayRecords[i].employee_name + "</td>");
            tr.append("<td>" + displayRecords[i].employee_salary + "</td>");
            tr.append("<td>" + displayRecords[i].employee_age + "</td>");
            $('#emp_body').append(tr);
        }
    }
    function apply_pagination() {
        $pagination.twbsPagination({
            totalPages: totalPages,
            visiblePages: 6,
            onPageClick: function (event, page) {
                displayRecordsIndex = Math.max(page - 1, 0) * recPerPage;
                endRec = (displayRecordsIndex) + recPerPage;
                console.log(displayRecordsIndex + 'ssssssssss'+ endRec);
                displayRecords = records.slice(displayRecordsIndex, endRec);
                generate_table();
            }
        });
    }
  });
</script>

Answer 1

You can do this with below steps:

1) Add a drop down in your ui which show records per page, something like this:

<select id="recPerPage" onchange="apply_pagination();">    
<option value="5">5</option>    
<option value="10" selected='selected'>10</option>    
<option value="20">20</option>    
</select>

You can add this above or below the table as per your ui preferences.

Please note the dropdown should trigger the function apply_pagination onchange . I have added event handling inline just for reference. You should do it via addEventListner

2) In your code function apply_pagination() should get the current value of the recPerPage dropdown at the begining like this:

`recPerPage = $('#recPerPage').val();`

That should do the do the trick for you.

Your can also set the default value for recPerPage by replacing this:

recPerPage = 10,

with this:

recPerPage = $('#recPerPage').val(),

Update:

The pagination plugin you are using has a correct/updated version linked here

and

It has the dynamic total pages issue documented here , look for the heading "Dynamic Total number of pages"

Above should help you, I think.

Add Items per page option

Question

1 answers

solution1
0 2020-09-27 06:52:29

Add Items per page option

Question

1 answers

solution1 0 2020-09-27 06:52:29

solution1
0 2020-09-27 06:52:29