Page length not working when change datatables parameter

WaspFan

This is probably something very simple, but I am new to this, and have not been able to find answer on here.

Using Datatables with Bootstrap4 and PHP.

I am having problems getting table to display default number of rows (10).

I want to disable ability to change page length, but the moment I add any parameters to the Datatables function it expands to the number of records in the table.

The Head section contains:

        <link href="css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
        <link href="css/dataTables.bootstrap4.min.css" rel="stylesheet" id="bootstrap-css">
        <link rel = "stylesheet" type = "text/css" href = "css/jquery.dataTables.min.css" />

        <link href="css/all.css" rel="stylesheet"  type="text/css">
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery.min.js"></script>

At the base of the Body section

        <script src = "js/jquery-3.1.1.js"></script>
        <script src = "js/bootstrap.js"></script>
        <script src = "js/script.js"></script>
        <script src = "js/jquery.dataTables.min.js"></script>
        <script src = "js/dataTables.bootstrap4.min.js"></script>

and the function

           $(document).ready(function () {
             $('#table').DataTable({
             "paging": false,
             "lengthChange": false,
              "pageLength": 10
                });
           });

Date is collected via PHP

                    <tbody>
                        <?php
                        $query = $conn->query("SELECT * FROM `memberdetails` ORDER BY `lastname`, `firstname` ASC ") or die(mysqli_error());
                        while ($f_query = $query->fetch_array()) {
                            ?>
                            <tr>
                                <td><?php echo $f_query['firstname'] ?></td>
                                <td><?php echo $f_query['lastname'] ?></td>
                        </tr>
                        <?php
                    }
                    ?>
                    </tbody>

If I remove all the items in the DataTable function the default table form (10 rows, page length change dropdown, and search box) is shown.
If I just have the paging:false line it displays the table with search box, no dropdown, but all 200 records.
Adding any other item (e.g. pagelength) shows the full table, but with no search or dropdown.

Thanks for feedback

kthorngren

Typically when the Datatables formatting and functions aren't working there is a Javascript error stopping execution. Nothing stands out as an error in the above code. Look at your browser's console for error messages.

Kevin

WaspFan

In Firefox I get this when I open the Web Console

TypeError: i is undefined[Learn More] bootstrap.min.js:6:2745
Fn<
http://localhost/agc/js/bootstrap.min.js:6:2745
<anonymous>
http://localhost/agc/js/bootstrap.min.js:6:1559
<anonymous>
http://localhost/agc/js/bootstrap.min.js:6:200
<anonymous>
http://localhost/agc/js/bootstrap.min.js:6:2

Have no idea what it means (I'm new to this)

As you can see I am running everything from local. The versions of Bootstrap4, Jquery and Datatables were all downloaded yesterday, so are up to date..

kthorngren

You are loading these in the wrong order:

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>

Reverse the order. jQuery needs to load first.

Kevin

WaspFan

Reversed order, but makes no difference

kthorngren

Reversed order, but makes no difference

Are you getting the same error?

Can you post a link to your page or a test case replicating the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

Just noticed that you are including these files twice; once in the The Head section contains: and once in the At the base of the Body section. You only want to include the JS and CSS files once.

Kevin

WaspFan

Thanks for your help - it was my fault not understanding some of the Datatable documentation.

It was the "paging": false, directive that was causing the problem.

I had assumed it was to do with the display of the page length change dropdown.

Only thing I need to do now is understand why the sorting buttons don't display properly