locked
mdboot strap datatables pagination not working RRS feed

  • Question

  • User81789783 posted

    i have below code but it does not showing pagination ..does not showing any error

    $(document).ready(function () {
      
        $('#dtBasicExample').DataTable({
            "pagingType": "simple" // "simple" option for 'Previous' and 'Next' buttons only
        });
        $('.dataTables_length').addClass('bs-select');
     })
    <table id="dtBasicExample" class="table table-striped table-bordered table-sm">
                                                        <thead>
                                                            <tr>
                                                                <th scope="col" style="font-size:1rem;font-weight:bold">Task</th>
                                                                <th scope="col" style="font-size:1rem;font-weight:bold">Date Time</th>
                                                                <th scope="col" style="font-size:1rem;font-weight:bold">status</th>
                                                              
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td scope="row">Task 1</td>
                                                                <td>1/1/2019</td>
                                                                <td>Complete</td>
                                                              
                                                            </tr>
                                                            <tr>
                                                                <td scope="row">Task 2</td>
                                                                <td>4/4/2018</td>
                                                                <td>Complete</td>
                                                             
                                                            </tr>
                                                            <tr>
                                                                <td scope="row">Task 3</td>
                                                                <td>3/3/2018</td>
                                                                <td>In-Progress</td>
                                                              
                                                            </tr>
                                                            <tr>
                                                                <td scope="row">Task 3</td>
                                                                <td>3/3/2018</td>
                                                                <td>In-Progress</td>
    
                                                            </tr>
                                                            <tr>
                                                                <td scope="row">Task 3</td>
                                                                <td>3/3/2018</td>
                                                                <td>In-Progress</td>
    
                                                            </tr>
                                                            <tr>
                                                                <td scope="row">Task 3</td>
                                                                <td>3/3/2018</td>
                                                                <td>In-Progress</td>
    
                                                            </tr>
                                                            <tr>
                                                                <td scope="row">Task 3</td>
                                                                <td>3/3/2018</td>
                                                                <td>In-Progress</td>
    
                                                            </tr>
                                                            <tr>
                                                                <td scope="row">Task 3</td>
                                                                <td>3/3/2018</td>
                                                                <td>In-Progress</td>
    
                                                            </tr>
                                                            <tr>
                                                                <td scope="row">Task 3</td>
                                                                <td>3/3/2018</td>
                                                                <td>In-Progress</td>
    
                                                            </tr>
                                                            <tr>
                                                                <td scope="row">Task 3</td>
                                                                <td>3/3/2018</td>
                                                                <td>In-Progress</td>
    
                                                            </tr>
                                                            <tr>
                                                                <td scope="row">Task 3</td>
                                                                <td>3/3/2018</td>
                                                                <td>In-Progress</td>
    
                                                            </tr>
    
                                                        </tbody>
                                                    </table>

    <script src="~/Scripts/js/vendor/datatables/js/jquery.dataTables.min.js"></script>

    <link href="~/Scripts/js/vendor/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" />

    Monday, June 17, 2019 8:06 AM

All replies

  • User839733648 posted

    Hi erum,

    According to your description and code, I've made a test and it works well on my side.

    I suggest that you could pay attention to the references of the js and css file. 

    You could refer to the two links to get the CDN.

    MD Bootstrap CDN: https://mdbootstrap.com/md-bootstrap-cdn/

    Bootstrap 4 DataTables CDN: https://cdn.datatables.net/ 

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
        <!-- Bootstrap core CSS -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
        <!-- Material Design Bootstrap -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.2/css/mdb.min.css" rel="stylesheet">
        <link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet">
        <!-- JQuery -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <!-- Bootstrap tooltips -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
        <!-- Bootstrap core JavaScript -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <!-- MDB core JavaScript -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.2/js/mdb.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#dtBasicExample').DataTable({
                    "pagingType": "simple" // "simple" option for 'Previous' and 'Next' buttons only
                });
            })
        </script>
    </head>
    <body>
        <table id="dtBasicExample" class="table table-striped table-bordered table-sm">
            <thead>
                <tr>
                    <th scope="col" style="font-size:1rem;font-weight:bold">Task</th>
                    <th scope="col" style="font-size:1rem;font-weight:bold">Date Time</th>
                    <th scope="col" style="font-size:1rem;font-weight:bold">status</th>
                </tr>
            </thead>
            <tbody>
                  //data
            </tbody>
        </table>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    Monday, June 17, 2019 10:07 AM
  • User81789783 posted

    i need to have Datatables for mdboot strap

    Monday, June 17, 2019 11:15 AM
  • User839733648 posted

    Hi erum,

    Do you mean that you want the style of datatable like that in this link: https://mdbootstrap.com/docs/jquery/tables/datatables/ ?

    I've found the download of mdboot strap datatables from: https://mdbootstrap.com/docs/jquery/tables/datatables/#otpions-reference 

    I've applied that on my testing demo and it works well.

    I suggest that you should pay attention to the order of the refereneces and do not lose any necessary reference.

    Here is my testing code. You may follow the code and have a try.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
        <!-- Bootstrap core CSS -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
        <!-- Material Design Bootstrap -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.2/css/mdb.min.css" rel="stylesheet">
        <!-- DataTables(Download to be local file)  -->
        <link href="MDB-Free_4.8.2/css/addons/datatables.min.css" rel="stylesheet" />
        <!-- JQuery -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <!-- Bootstrap tooltips -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
        <!-- Bootstrap core JavaScript -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <!-- MDB core JavaScript -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.2/js/mdb.min.js"></script>
        <!-- DataTables(Download to be local file)  -->
        <script src="MDB-Free_4.8.2/js/addons/datatables.min.js"></script>
        </script>
            $(document).ready(function () {
                $('#dtBasicExample').DataTable({
                    //"pagingType": "simple" // "simple" option for 'Previous' and 'Next' buttons only
                });
            })
        </script>
    </head>
    <body>
        <table id="dtBasicExample" class="table table-striped table-bordered table-sm">
            <thead>
                <tr>
                    <th scope="col" style="font-size:1rem;font-weight:bold">Task</th>
                    <th scope="col" style="font-size:1rem;font-weight:bold">Date Time</th>
                    <th scope="col" style="font-size:1rem;font-weight:bold">status</th>
                </tr>
            </thead>
            <tbody>
                  //data
            </tbody>
        </table>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    Tuesday, June 18, 2019 4:09 AM