Last active
November 27, 2018 19:27
-
-
Save bablukpik/8967f7d839243696f5ef63ec6837bee6 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Datatable Refresh | |
$('.dataTables').DataTable().ajax.reload(); | |
// or | |
$('#example-select').on('change', function(){ | |
$('#example').DataTable().ajax.reload(); | |
}); | |
//Destroy the old datatable | |
$('.dataTables').dataTable().fnDestroy(); | |
//Passiing data dynamically to datatable | |
$('#btn-search').click(function() { | |
$userID = $('#inputUserID').val(); | |
$activity = $('#inputActivity').val(); | |
$dtFrom = $('#inputStartDate').val(); | |
$dtTo = $('#inputEndDate').val(); | |
dataTable.ajax.data = function(d) { | |
d.userID = $userID; | |
d.activity = $activity; | |
d.dtFrom = $dtFrom; | |
d.dtTo = $dtTo; | |
}; | |
dataTable.ajax.reload(); //Datatable Reinitialization/Refresh/reload | |
}); | |
In above process, we can also set dynamic message like this | |
message: function () { | |
return 'Hello world'; | |
} | |
//Dynamically Title adding during Print | |
buttons: [ | |
{ | |
extend: 'print', | |
text: 'All', | |
title: function () { return $('#dt-title').val(); }, | |
} | |
] | |
//Set the first column's title with columnDefs option: | |
$('#example').dataTable( { | |
"columnDefs": [ | |
{ "title": "My column title", "targets": 0 } | |
] | |
} ); | |
//OR, using columns option: | |
$('#example').dataTable( { | |
"columns": [ | |
{ "title": "My column title" }, | |
null, | |
null, | |
null, | |
null | |
] | |
} ); | |
//hiding columns by this command: | |
fnSetColumnVis( 1, false ); | |
Where first parameter is index of column and second parameter is visibility. | |
//hiding subset of columns by this command: | |
"dom": 'lfrtip', | |
"columnDefs" : [ | |
{ "targets": [4,5], "visible": false } | |
] | |
//How to make DataTables subset of columns toggling | |
var oTable = $('#example').DataTable({ | |
"dom": 'lfrtip', | |
"columnDefs" : [ | |
{ "targets": [4,5], "visible": false } | |
] | |
}); | |
$('a.column-toggle').on('click', function(e){ | |
var column = oTable.column($(this).data('id')); | |
column.visible(!column.visible()); | |
e.preventDefault(); | |
}); | |
Html: | |
http://jsfiddle.net/tmbua7sb/2/ | |
// dir: SortDirection; | |
// $requestData['order'][0]['column'] is index of a column | |
// $requestData['order'][0]['dir'] is 'asc' or 'desc' | |
// $requestData['length'] is length: 5 that is number of records that will be shown simply limit 5 | |
// $requestData['start'] is start: 0 that is offset or starting point of selecting records | |
// $requestData['search']['value'] is what will be search by using search box | |
Example: | |
$limit = $requestData['length']; // limit | |
$start = $requestData['start']; // offset | |
$orderable_col = $sortable_cols[$requestData['order'][0]['column']]; //column | |
$dir = $requestData['order'][0]['dir']; // asc/desc | |
$search = requestData['search']['value']; // a search string | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment