How to add additional feature/function in DataTables?

You asked a very naive question. Hopefully this helps:

1. 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>

2. 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.

3. 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>

4. 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.

5. 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>' )
                } );
            } );
        }
    } );
} );