DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Unable to get data-table output

Unable to get data-table output

shidhartha.dasguptashidhartha.dasgupta Posts: 2Questions: 1Answers: 0
in Free community support

Hello,

I am very very new in html and css field.
I would like to get table output as shown bellow (screenshot_8).

I have put all javascript and css and html codes together in one .html file. When I run the .html file I am not getting desired output.
I am attaching my html code (monitoring.html).

Please suggest what steps do I need to take to get the output.

Lateron, I would like to update some rows in database by selecting the checkbox.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,961Questions: 26Answers: 5,070
    edited April 2017 Answer ✓

    You need to change the order of your JS loading to this:

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"></script>

    The Datatable initialization code needs to be below the above. I would recommend moving it out of the <head> and place it at the bottom before </body>.

    <script type="text/javascript">
$(document).ready(function() {
    $('#example').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]]
    } );
} );
</script>
</body>

    That should get you going. Certain items have dependancies on other scripts being loaded first. For example jquery.dataTables.min.js requires jQuery to be loaded first. dataTables.select.min.js relies on Datatables being loaded and should follow jquery.dataTables.min.js.

    Kevin

  • shidhartha.dasguptashidhartha.dasgupta Posts: 2Questions: 1Answers: 0

    Thanks a ton, for your prompt reply.
    That worked fine for me.

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.