How to add additional feature/function in DataTables?

Question

I have created a basic datatable, now I want to customize it by adding filter in every column. I already got the solution from: https://www.datatables.net/examples/api/multi_filter_select.html

screensotdatatblesite

BUT, where I should put the additional code? I have tried copy paste the code in jquery.datatables.js and also try to put in new js file, neither both of them worked.

Please kindly help me...

code that I got from datatables website:

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );

Please update your question with more information about what you are doing and some code samples. — xjmdoo
– xjmdoo, Commented Jan 17, 2018 at 7:55
hi @xjmdoo Updated! please check the screenshot and code, hopefully its clear — Andri Setiawan
– Andri Setiawan, Commented Jan 17, 2018 at 8:06
You can need to link a new script file or use a <script> tag in the same HTML file and use above code if your HTML has a <table> tag with all the data rows after document load. — vishwarajanand
– vishwarajanand, Commented Jan 17, 2018 at 8:50

vishwarajanand · Accepted Answer · 2018-01-17 08:10:03Z

You asked a very naive question. Hopefully this helps:

You need to first add all dependencies of DataTables in your HTML file:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

Create the table in HTML with all data inside <table id="YourIdOfTableTag"> tag or do some scripting to insert data into table as new rows.
Once all data is present in table, you can your own custom script and add into the HTML:

<script type="text/javascript" language="javascript" src="urOwnScript.js"></script>

urOwnScript.js can be written in two ways. * A. If you already have the table with data, then initialize the datatable once the page load is done. * B. If you are fetching data and editing html DOM with new rows, then once that operation is finished initialize datatable.
For case A, contents of urOwnScript.js can be like this:

$(document).ready(function() { // Means this is run only on page load, which means <table> tag has all the data already.
    $('#YourIdOfTableTag').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );

Your explanation is so clear! it works. I am so new in programming, I will learn more. Thanks @Vishwaraj

Collectives™ on Stack Overflow

How to add additional feature/function in DataTables?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related