locked
How to append pages under pagination of HTML table? RRS feed

  • Question

  • User-1549556126 posted

    I have created my user defined paginate function in which I am trying to introduce navigation buttons next & previous. I have a dynamically defined div tag with id nav because the number of pages in my table are not fixed I want to have them loaded between previous & next links however I am not able to figure out.

    I am trying to do everything in jQuery, here's what I have so far.

    $(document).ready(function () {
                                    paginate('#data', 4); // Manage Number of Records Per Page
                                    function paginate(tableName, RecordsPerPage) {
                                        $('#nav').remove();
                                        $(tableName).after('<div id="nav" style="text-align:left; "></div>');
                                        var rowsShown = RecordsPerPage;
                                        var rowsTotal = $(tableName + ' tbody tr').length;
                                        var numPages = rowsTotal / rowsShown;
                                        $('#nav').append('<input id="numRecords" type="text" class="form-control" style="width: 50px;" value="25" title="Number of Members Per Page"/>');
                                        $('#nav').append('<ul class="pagination pagination-sm" style="list-style-type:none;"> \
                                                                <li class="prev"><a href="#">&laquo; Previous</a></li>');
                                        for (i = 0; i < numPages; i++) {
                                            var pageNum = i + 1;
                                            $('#nav').append('<li><a id="pgNo" rel = "  ' + i + '  ">' + pageNum + '</a></li>');
                                        }
                                        $('#nav').append('<li class="next"><a href="#"> Next &raquo;</a></li></ul>');
                                        $(tableName + ' tbody tr').hide();
                                        $(tableName + ' tbody tr').slice(0, rowsShown).show();
                                        $('#nav a:first').addClass('active');
                                        $('#nav a').bind('click', function () {
                                            $('#nav a').removeClass('active');
                                            $(this).addClass('active');
                                            var currPage = $(this).prop('rel');
                                            var startItem = currPage * rowsShown;
                                            var endItem = startItem + rowsShown;
                                            $(tableName + ' tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
                                                css('display', 'table-row').animate({ opacity: 1 }, 300);
                                        });
                                    }
                                    var pageItem = $(".pagination li").not(".prev,.next");
                                    var prev = $(".pagination li.prev");
                                    var next = $(".pagination li.next");
                                    pageItem.click(function () {
                                        pageItem.removeClass("active");
                                        $(this).not(".prev,.next").addClass("active");
                                    });
                                    next.click(function () {
                                        $('li.active').removeClass('active').next().addClass('active');
                                    });
                                    prev.click(function () {
                                        $('li.active').removeClass('active').prev().addClass('active');
                                    });
                                });

    I have the code for navigating through the list items ready. I am just not able to work out in appending the pages as list items. For Your Information, #data is a simple table with some number of records.

    Thursday, August 8, 2019 10:08 PM

Answers

  • User288213138 posted

    Hi vyasnikul,

    According to your description, do you mean that you want to add previous and next page functions in pagination?

    if so ,you can try to use insertBefore() and insertAfter() function.

    Here's a demo you can use as a reference:http://jsfiddle.net/d9sj30zy/

    but i recommend using the jquery.datatable plugin because it's quick and easy.

    If I misunderstand your requirement, please post more details information about your requirement.

    Best regards,

    sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 9, 2019 6:47 AM

All replies

  • User288213138 posted

    Hi vyasnikul,

    According to your description, do you mean that you want to add previous and next page functions in pagination?

    if so ,you can try to use insertBefore() and insertAfter() function.

    Here's a demo you can use as a reference:http://jsfiddle.net/d9sj30zy/

    but i recommend using the jquery.datatable plugin because it's quick and easy.

    If I misunderstand your requirement, please post more details information about your requirement.

    Best regards,

    sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 9, 2019 6:47 AM
  • User-1549556126 posted

    Hello Sam,

    I did try to use jQuery.datatable plugin & it works in the first attempt however, when I try to reload the values of different tables with same columns in it(as the table is dynamic); the error is received saying 

    "DataTables warning: table id=data - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3"

    I did try using destroy function but it doesn't works.

    // Pagination of HTML Table
                                $(document).ready(function () {
                                    $('#data').DataTable({
                                        "lengthMenu": [[5, 10, 25, 50, 100, 500, 1000, -1], [5, 10, 25, 50, 100, 500, 1000, "All"]],
                                        "filter": false, // Hide inbuilt filter my manual one is performing better
                                        "info": false, // Hide "Show 8 of 100" text
                                        "pageLength": 1000, // Setting Default page length to 25
                                        paging: true,
                                        searching: true,
                                        deferRender: true,
                                        scroller: true
                                    });
                                });

    I am calling this function in the ajax call and not passing the data as a parameter in the datatable function. Do you know the way I can clean up the data source to avoid this error?

    Monday, August 12, 2019 6:55 PM
  • User-2054057000 posted

    I want to have them loaded between previous & next links however I am not able to figure out

    You are doing a lot of things in your code which makes it fairly difficult to read and understand. What you can do is to insert console.log() onto lines where your code works improperly and then try to debug it. 

    I suggest you to take the look of this jQuery Pagination Demo.

    Also refer this article: How to Create jQuery Pagination System in your Web Page

    Tuesday, August 13, 2019 5:06 AM