Skip to content

Instantly share code, notes, and snippets.

@bablukpik
Last active November 27, 2018 19:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bablukpik/8967f7d839243696f5ef63ec6837bee6 to your computer and use it in GitHub Desktop.
Save bablukpik/8967f7d839243696f5ef63ec6837bee6 to your computer and use it in GitHub Desktop.
//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