DataTables Tricks

Example 1


 $(document).ready(function() {

  $( "#selectType" ).change(function() {
  $('#example_filter input[type="search"]').val($(this).val()).keyup();
});

$('#example').DataTable( {
/*  "aoColumnDefs": [
      { 'bSortable': false, 'aTargets': [ 0 ] }
   ]*/
   "columnDefs": [
    { "orderable": false, "targets": [1] },
    { 'searchable'  : false, 'targets' : [9] 
},
    
],
"order": [[ 1, "desc" ]],
//"dom": 'Plfrtip',
"dom": '<"wrapper"flipt>', //total on top of datatable jquery
//"dom": 'lrtip',
//"dom": '<lf<t>ip>',
//"dom": '<"top"i>rt<"bottom"flp><"clear">',
searchPanes: {
            viewTotal: true
        },
        "orderCellsTop": true,
        "fixedHeader": true,
});

});

Example 2

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        if(title == 'Status'){
        $(this).html( '<input type="text" size="5px" placeholder="'+title+'" />' );
        }
    });
 
    // DataTable
    var table = $('#example').DataTable({
        initComplete: function () {
            // Apply the search
            this.api().columns().every( function () {
                var that = this;
 
                $( 'input', this.footer() ).on( 'keyup change clear', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        },
        "columnDefs": [
        { "orderable": false, "targets": [1] },
        { 'searchable'  : false, 'targets' : [10] 
    },
        
    ],
    //"order": [[ 5, "asc" ]]
    });
 
} );



Leave a Reply