http://ma.gov.kp/assets/js/pages/table-advanced.js

1$(document).ready(function() {
2    
3    $('#table1').DataTable( {
4        "responsive":true,
5        "sort": false,
6        initComplete: function () {
7            this.api().columns().every( function () {
8                var column = this;
9                var select = $('<select><option value=""></option></select>')
10                    .appendTo( $(column.footer()).empty() )
11                    .on( 'change', function () {
12                        var val = $.fn.dataTable.util.escapeRegex(
13                            $(this).val()
14                        );
15
16                        column
17                            .search( val ? '^'+val+'$' : '', true, false )
18                            .draw();
19                    } );
20
21                column.data().unique().sort().each( function ( d, j ) {
22                    select.append( '<option value="'+d+'">'+d+'</option>' )
23                } );
24            } );
25        }
26    } );
27
28    $('select').select2({
29        placeholder: "Select a value",
30        theme:"bootstrap"
31    });
32
33    //table2
34    /* Formatting function for row details - modify as you need */
35    function format ( d ) {
36        // `d` is the original data object for the row
37        return '<table class="table table-striped" cellpadding="5" style="padding-left:50px;">'+
38            '<tr>'+
39            '<td>User name:</td>'+
40            '<td>'+d.UserName+'</td>'+
41            '</tr>'+
42            '<tr>'+
43            '<td>contact no:</td>'+
44            '<td>'+d.contact+'</td>'+
45            '</tr>'+
46            '<tr>'+
47            '<td>Extra info:</td>'+
48            '<td>And any further details here (images etc)...</td>'+
49            '</tr>'+
50            '</table>';
51    }
52
53    $(document).ready(function() {
54        var table2 = $('#table2').DataTable( {
55            "sort": false,
56            "ajax": "js/pages/data.txt",
57            "columns": [
58                {
59                    "className":      'details-control',
60                    "orderable":      false,
61                    "data":           null,
62                    "defaultContent": ''
63                },
64                { "data": "#" },
65                { "data": "FirstName" },
66                { "data": "LastName" },
67                { "data": "UserE-mail" }
68            ],
69            "order": [[1, 'asc']],
70            "responsive":true
71        } );
72
73        // Add event listener for opening and closing details
74        $('#table2 tbody').on('click', 'td', function () {
75            var tr = $(this).closest('tr');
76            var row = table2.row( tr );
77
78            if ( row.child.isShown() ) {
79                // This row is already open - close it
80                row.child.hide();
81                tr.removeClass('shown');
82            }
83            else {
84                // Open this row
85                row.child( format(row.data()) ).show();
86                tr.addClass('shown');
87            }
88        } );
89    } );
90
91
92
93    //table3
94    jQuery(document).ready(function() {
95
96        var table3 = $('#table3').DataTable({
97            "responsive":true,
98            "sort": false
99        });
100
101        $('button.toggle-vis').on('click', function(e) {
102            e.preventDefault();
103
104            // Get the column API object
105            var column = table3.column($(this).attr('data-column'));
106
107            // Toggle the visibility
108            column.visible(!column.visible());
109        });
110
111    });
112} );
113
114
115//table4
116
117var table4 = $('#table4').DataTable({
118    "responsive":true,
119    "sort": false
120});
121$("#table5").DataTable({
122    "responsive":true,
123    "sort": false
124});