We Keep Coding

How to define multiple initialization parameters for DataTable?

I have the following js code to initialize a DataTable:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
} );
What I'm currently failing to figure out is, how do I now define further settings other than the buttons as an additional argument? I would for example like to define the settings of the length menu such as is explained here https://datatables.net/examples/advanced_init/length_menu.html using:
$(document).ready(function() {
$('#example').DataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );
So I'd do something like this, which doesn't work:
$(document).ready(function() {
$('#example').DataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
} );
This is likely obvious, but I'm just starting out with js.

You need add letter l in dom
Something like this:
var oTable = $('#example').DataTable( {
dom: 'Blfrtip',
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
});
You can check the reference in: https://datatables.net/reference/option/dom
Result : https://jsfiddle.net/g2kdfrcu/

How to add unique attribute in TR?

I have a form. After submission the data is sent to database.
I want to show all submissions details in dashboard with dataTables.js, What how it looks like.
table = $('#entries').DataTable({
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
data: data_table,
aoColumnDefs: [{ aTargets: -1, bSortable: false, bSearchable: false}],
"aaSorting": [[0,'desc']],
columns: Submissions.data_columns,
createdRow:function(row,data,dataIndex){
console.log(subId);
for(i=0; i<subId.length; i++){
$(row).attr("subId",subId[i]);
}
}
});
subId is an array where i have submissions' Ids of the form. Is there a way that I could use to add subId's to each row?

datatable column.search() is not filtering my table using

I've created a simple search but it's not filtering, I'm using datatable plug-ins. I don't know what did I missed in my script.
<input type="text" id="txtserial" name="txtSerial" class="form-control" />
Here's my javascript:
var dtmyJob = $('#myJob').DataTable({
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
iDisplayLength: -1,
sScrollY: "40vh",
bScrollInfinite: true, //this property disables pagination
"scrollCollapse": true,
"paging": false,
"bInfo": false,
"bFilter": false,
"bSort": false
});
$("#txtserial").on('keyup', function () {
dtmyJob.columns(2).search(this.value).draw();
alert(dtmyJob);
});

Remove bFilter: false because you have disabled searching ability and that's why searching with columns().search() doesn't work.
Use dom option if you just want to hide the search box.
For example:
'dom': 'lrtip'

How to manually delimit the number of displayed tows of a table (DataTables)?

Is there any possibility to manually delimit the numbers of the displayed rows of a (Data)Table?
Normally we use filtering input, but then the values are fixed; for example: 10, 25, 50, 100, All.
I would like to have a text field where I could insert the number of rows I wish to display; for example: 3, 7, 29, etc and then after clicking a button we would display the "pages" of the table only with the inserted number of rows.
I read some tutorials and did some searches, but was unable to find anything about it.
Here the JavaScript of my table (but I don't think it helps):
$('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
Any help is welcome!

Straight from datatable forums.
var oTable;
$(document).ready(function() {
$('YourButtonIdorSelector').click( function () {
var newDisplayLength = $("TextFieldIDOrSelectorHere").val();
var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = newDisplayLength;
oTable.fnDraw();
});
oTable = $('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
});
or
var searchTable = $('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
searchTable.fnSettings()._iDisplayLength = $("TextFieldIDOrSelectorHere").val();
searchTable.fnDraw(); //redraw the table

You can simply add the new length you want displayed to the _iDisplayLength property and redraw the table.
When creating the data table, this stuff would go in the complete callback function fnInitComplete
$('#search-table').dataTable({
"fnInitComplete": function(oSettings,json){
var $table = this;
//example of how many rows to show
var newLength = 29;
//add the new value to your datatable object
oSettings._iDisplayLength = newLength;
//redraw the table, you have to do this to see the changes
$table.fnDraw();
},
//the rest of your settings
});

How to reinitialize jquery Datatable

How to reinitialize a jQuery datatable? I even tried to remove table element. Still that table is displaying. My code is like this:
function removeExistingDataTableReference(tableid)
{
if(oTable !=null)
{
oTable.fnDestroy();
}
if(document.getElementById(tableid)){
document.getElementById(tableid).innerHTML="";
}
oTable=null;
try
{
if(oTable !=null)
{
//oTable.fnDestroy();
alert("error in fndestroy");
}
oTable=null;
if(document.getElementById(tableid)){
document.getElementById(tableid).innerHTML="";
}
if(document.getElementById("FTable"))
{
removeElement(document.getElementById("FTable"));
}
}
catch(e)
{
alert("Error happend:"+e.message);
}
}
function removeElement(element)
{
try
{
var elem = document.getElementById('FTable');
elem.parentNode.removeChild(elem);
//ert(element.parentNode.id);
//element.parentNode.removeChild(element);
alert("removed");
return true;
}
catch(e)
{
alert(e.message);
}
return false;
}
How can I do that? After Search button click table is loaded. Again, when I search with another search parameter, table should load with new data. That is not happening. How to fix it??
Table is initialized like this:
function createDataTable()
{
try
{
oTable = $('#FTable').dataTable( {
"bDestroy":true,
"bJQueryUI": true,
"sScrollX": "100%",
"sScrollXInner": tablewidth+"px",
"bScrollCollapse": true,
"bSort":false,
"iDisplayLength" : 50,
"sPaginationType" : "full_numbers",
"aLengthMenu": [[10, 18, 50, -1], [10, 18, 50, "All"]]
} );
new FixedColumns( oTable, {
"iLeftColumns": 1,
"iRightColumns": 1
} );
}
catch (e)
{
alert(e.message);
}
}

You can reinitialize the datatable by clearing it and then adding the element using fnAddData().
First check whether the dataTable exists or not. The function fnClearTable() will clear the data from table.
In the code, dataTable is datatable variable and results is the id of table.
if(typeof dataTable === 'undefined'){
dataTable = $('#results').dataTable({
"aLengthMenu": [
[25, 50, 100, 200],
[25, 50, 100, 200]
],
"iDisplayLength" : 25,
"sPaginationType": "full_numbers",
});
}else dataTable.fnClearTable();
Then again add the data using fnAddData.
dataTable.fnAddData( [key, assignee, summary, status, days]);

You may use fnReloadAjax
http://datatables.net/forums/discussion/256/fnreloadajax/p1
oTable = $('#FTable').dataTable( {
"bDestroy":true,
"bJQueryUI": true,
"sScrollX": "100%",
"sScrollXInner": tablewidth+"px",
"bScrollCollapse": true,
"bSort":false,
"iDisplayLength" : 50,
"sPaginationType" : "full_numbers",
"aLengthMenu": [[10, 18, 50, -1], [10, 18, 50, "All"]]
} );
function reinit(){
oTable.fnReloadAjax( 'media/examples_support/json_source2.txt' );
}