How to include Bootstrap 3 and JQuery Datatables in my project?

Question

I have a question about including libraries in my project. The bootstrap 3 is the first library that is used on my project. Also, I need JQuery Datatables. I'm wondering if the code and way they implemented in my project is correct or I need to adjust. Here is example of my current home page that includes the libraries:

Home Page

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- *** Start: JS for DataTables. *** -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
<!-- *** End: JS for DataTables. *** --> 

Then I found this example: https://datatables.net/examples/styling/bootstrap and there is very little information on what should be included. Also, there is no example on how to include buttons that I use in my code. If anyone know the way how to implement these libraries or if my code needs some adjustments please let me know. Thank you.

Answer 1

you can include like this

also refer this link Datatable Github

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dataTables.bootstrap.css">

<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="dataTables.bootstrap.js"></script>

<script type="text/javascript" charset="utf-8">
                $(document).ready(function() {
                    $('#example').DataTable();
                } );
            </script>

Answer 2

Look this code for data table initialize

 var initTable1 = function () {
        var table = $('#sample_1');

        var oTable = table.dataTable({

            // Internationalisation. For more info refer to http://datatables.net/manual/i18n
            "language": {
                "aria": {
                    "sortAscending": ": activate to sort column ascending",
                    "sortDescending": ": activate to sort column descending"
                },
                "emptyTable": "No data available in table",
                "info": "Showing _START_ to _END_ of _TOTAL_ entries",
                "infoEmpty": "No entries found",
                "infoFiltered": "(filtered1 from _MAX_ total entries)",
                "lengthMenu": "_MENU_ entries",
                "search": "Search:",
                "zeroRecords": "No matching records found"
            },

            // Or you can use remote translation file
            //"language": {
            //   url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
            //},


            buttons: [
                { extend: 'print', className: 'btn dark btn-outline' },
                { extend: 'copy', className: 'btn red btn-outline' },
                { extend: 'pdf', className: 'btn green btn-outline' },
                { extend: 'excel', className: 'btn yellow btn-outline ' },
                { extend: 'csv', className: 'btn purple btn-outline ' },
                { extend: 'colvis', className: 'btn dark btn-outline', text: 'Columns'}
            ],

            // setup responsive extension: http://datatables.net/extensions/responsive/
            responsive: true,

            //"ordering": false, disable column ordering 
            //"paging": false, disable pagination

            "order": [
                [0, 'asc']
            ],

            "lengthMenu": [
                [5, 10, 15, 20, -1],
                [5, 10, 15, 20, "All"] // change per page values here
            ],
            // set the initial value
            "pageLength": 10,

            "dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable

            // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
            // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). 
            // So when dropdowns used the scrollable div should be removed. 
            //"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
        });
    }

there is implement of buttons. finally you shoud initialize your data table in documnet ready like this code

jQuery(document).ready(function() {
    initTable1();
});

Answer 3

The correct order for include the sources of Datatables (with Buttons extension) in order to integrate it with Bootstrap is the next:

On the HEAD (Styles sources):

<!-- Bootstrap CSS-->
<link rel="stylesheet" type="text/css" href="<path>/bootstrap.min.css"/>

<!-- Datatables CSS -->
<link rel="stylesheet" type="text/css" href="<path>/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="<path>/buttons.bootstrap.min.css"/>

On the BODY (script sources):

<!-- jQuery JS -->
<script type="text/javascript" src="<path>/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script type="text/javascript" src="<path>/bootstrap.min.js"></script>

<!-- DataTables JS -->
<script type="text/javascript" src="<path>/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<path>/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="<path>/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="<path>/buttons.bootstrap.min.js"></script>
<script type="text/javascript" src="<path>/jszip.min.js"></script>
<script type="text/javascript" src="<path>/pdfmake.min.js"></script>
<script type="text/javascript" src="<path>/vfs_fonts.js"></script>
<script type="text/javascript" src="<path>/buttons.html5.min.js"></script>
<script type="text/javascript" src="<path>/buttons.flash.min.js"></script>
<script type="text/javascript" src="<path>/buttons.print.min.js"></script>
<script type="text/javascript" src="<path>/buttons.colVis.min.js"></script>

Note that <path> should be replace by the full path of the library. In my case I have it all locally, but you can use CDN repository too.

Also, remember that buttons only show if you configure correctly the dom option of the Datatable in the initialization step. My current config for the dom is this one ( where I have dropped the l : length change control):

dom = "< 'row' <'box-header' <'col-sm-6' B> <'col-sm-6' f> > >" +
      "< 'row' <'col-sm-12' tr> >" +
      "< 'row' <'col-sm-5' i> <'col-sm-7' p> >";

You can read more on site documentation: Datatables dom

Or on next explanation i have done before: Customization of Display Format for Datatables Plugin in Boostrap 3