Pagination not showing and not working in DataTables

Question

After working on another problem of getting the php code that reads the database working and finding it was my own error in not having the html in the servers document root, I'm hesitant to ask this one, but here goes:

I'm showing the header list of included jQuery modules and css modules. I get the first 10 rows of data and those 10 rows are sortable, but only those 10. I can't get the pagination buttons to show nor, the other rows to show, even if I set the number to 25, only 10 show.

 <title>My Library</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css"/>
    <LINK REL="stylesheet" HREF="_css/jquery.dataTables_themeroller.css" />
    <LINK REL="stylesheet" HREF="_css/home.css" id="styleid"/>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
     <script type="text/javascript" class="init">
        $(document).ready(function() {
            $('#books').DataTable({
            processing: true,
            bStateSave: true,
            ajax: {
                url: "./get_books.php",
                dataSrc: "data"
            },
            columns: [
                { data: "id" },
                { data:  "author" },
                { data:  "title" },
                { data:  "genre" },
                { data:  "location" },
                { data: "notes" }
            ]
            });
            $(document).on('click','#books tbody tr',function() {
                var row = $(this).closest("tr");
                //alert("You clicked: "+$(row).find("td:nth-child(6)").text());
                editBook($(row).find("td:nth-child(1)").text(),$(row).find("td:nth-child(2)").text(),$(row).find("td:nth-child(3)").text(),$(row).find("td:nth-child(4)").text(), $(row).find("td:nth-child(5)").text(), $(row).find("td:nth-child(6)").text());
            });
        });
    </script>

home.css sets some default colors. I'm using the easyui to pop up input and edit forms. That seems to be working.

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

If you're using PHP from your previous question, it will always return 10 rows since jQuery DataTables doesn't send rows parameter.

Use PHP code from my answer instead.

edited May 23 '17 at 12:04

Community

1
1

answered Jan 14 '16 at 19:38

Gyrocode.com

57,606
14
150
185

That was it! Sorry, but when you get an example, and you don't completely understand it, then it's harder to find the obvious. I was limiting it to 10 rows and always the same 10. One thing, after adding a row and then reloading from the database, the new row isn't there. But, if I refresh the page, then it shows up. – John Wooten Jan 14 '16 at 21:05
Figured this one out also. I was not referring to the same table somehow. I added a var oTable = $(#books).DataTables... before the document ready. Then where I did anything with the sql, I followed it with oTable.ajax.reload(null, false); That solved the problem. Not sure why $(#books).ajax.reload(null, false) didn't work, but this did. – John Wooten Jan 16 '16 at 21:09

Pagination not showing and not working in DataTables

1 Answers1