Develop Reference

multiple data table toggle column

$(document).ready(function() {
var table = $('#example').DataTable( {
} );
var table = $('#example2').DataTable( {
});
$('input.toggle-vis').on( 'click', function (e) {
// e.preventDefault(); //empêche la mise à jour des check
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
} );
My event "input.column-toggle" works only for my last table (example2) ...
How can I do for the event work for all my a.column-toggle class ?

You're using the table variable to find the column inside the table. But you've assigned two things (example1 and example2) to the same variable in successive statements. Therefore example2 has replaced example1 in the table variable. You've lost the information that relates to example1.
You need two variables, table1 and table2. And then perform the column hiding operation on both.
e.g. something like (I haven't tested it):
$(document).ready(function() {
var table1 = $('#example').DataTable( {
} );
var table2 = $('#example2').DataTable( {
});
$('input.toggle-vis').on( 'click', function (e) {
// Get the column API object
var column1 = table1.column( $(this).attr('data-column') );
var column2 = table2.column( $(this).attr('data-column') );
// Toggle the visibility
column1.visible( ! column1.visible() );
column2.visible( ! column2.visible() );
} );
} );
Or, if you need to do this on several tables, or want to add more tables flexibly in future, you might want to consider creating an array of tables and then looping through the array, performing the same actions on each element.

DataTable : How to hide the pagination and only show it as need?

I have 2 tables that are using DataTable jQuery Plug-in.
I wondering if there is a way to hide my pagination on the bottom right of my table.
Note:
Only show the pagination when I need one.
Hide the pagination when the query results is less than 10.

Use drawCallback option to handle DT draw event and show/hide pagination control based on available pages:
$('#table_id').dataTable({
drawCallback: function(settings) {
var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
pagination.toggle(this.api().page.info().pages > 1);
}
})

$('#dataTable_ListeUser').DataTable( {
//usual pager parameters//
"drawCallback": function ( settings ) {
/*show pager if only necessary
console.log(this.fnSettings());*/
if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
$('#dataTable_ListeUser_paginate').css("display", "block");
} else {
$('#dataTable_ListeUser_paginate').css("display", "none");
}
}
});

Use 'drawCallback' to solve this problem.
1.On the webpage, use developer tool to inspect the 'previous' button, then you will find a div element that wraps both the 'previous' and 'next' buttons. DataTables automatically assigned an id to this div based on your html table element's id.
For example, I have a table with id 'Atable'. In this table, DataTables automatically created a div element with id called 'Atable_paginate' to wrap the previous and next buttons.
2.For drawCallback, we write a function which checks if there is less than 1 page, if so, we hide element by utilising id.
For example, you have set there are 20 records on one page by
pageLength: 20,
which means if there are less then 20 records, we don't need to display 'previous' and 'next' buttons. So we write like below,
drawCallback: function(settings){
if($(this).find('tbody tr').length <= 20){
$('#Atable_paginate').hide();
}
}
3.The initialization of Atable should be like below
var table = $('#Atable').DataTable({
pageLength: 20,
lengthChange: false,
drawCallback: function(settings){
if($(this).find('tbody tr').length <= 20){
$('#Atable_paginate').hide();
}
}
});
4.If there are more than one table on the webpage, apply this method on each table.

You can use fnDrawCallback() method to hide the pagination in dataTable.
var oTable = $('#datatable_sample').dataTable({
"iDisplayLength": 10,
"fnDrawCallback": function(oSettings) {
if ($('#datatable_sample tr').length < 10) {
$('.dataTables_paginate').hide();
}
}
});​
The length which you can define as per the row you want to display in the listing.

$(this) did not work for me, probably because I am using TypeScript. So I used a different approach to get the JQuery element for the table wrapper and the DataTables API. This has been inspired by the answer of BitOfUniverse and tested with DataTables 1.10.
TypeScript:
'drawCallback': (settings: any) => {
// hide pager and info if the table has NO results
const api = new $.fn.dataTable.Api(settings);
const pageCount = api.page.info().pages;
const wrapper = $('#' + settings.sTableId).closest('.dataTables_wrapper');
const pagination = wrapper.find('.dataTables_paginate');
const info = wrapper.find('.dataTables_info');
pagination.toggle(pageCount > 0);
info.toggle(pageCount > 0);
}

You can give options when you create your datables on Javascript
$('.examples').DataTable({
"paging": false
});
All options are listed here:
http://www.datatables.net/reference/option/

Unable to highlight datatable row

In the example below highlighting works quite well with individual rows.
In my code I can see that selection of an individual row works, however, the actual highlighting does not work.
I am using Twitter Bootstrap 3 + Datatables.
http://datatables.net/release-datatables/examples/api/select_single_row.html
Any help would be appreciated. I have followed the example as is and I think perhaps I have not configured the table properly in its init or Bootstrap does not quite like highlighting.
var oTable;
$( document ).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
$("#pTable tbody tr").click( function( e ) {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
}
else {
oTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
});
/* Add a click handler for the delete row */
$('#deletePButton').click( function() {
var anSelected = fnGetSelected( oTable );
if ( anSelected.length !== 0 ) {
oTable.fnDeleteRow( anSelected[0] );
}
});
/* Init the table */
oTable = $('#pTable').dataTable( );
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
return oTableLocal.$('tr.row_selected');
}
});
So the deleteButton which is being referenced in the code works if I select a row and delete a row.
Just the highlighting doesnt work!

Is your table id "#pTable"?
Did you try adding a debbug stop on that method, to be sure that the selector is working?
On bootstrap to hightlight a row you must use one of this classes
Class Description
.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action
Bootstrap 3 Tables

how to create a jquery mobile select menu at pagebeforeshow?

I'm using dataTables with Jquery Mobile. My dataTable is initiated on pageBeforeShow. Inside my init callback function I construct a JQM select menu. This menu does not get properly enhanced = the button is there, but the custom-select is not created.
That's my problem!
Here's the shortened code:
$('div:jqmData(role="page")').live('pagebeforeshow', function(e, data) {
/** init datatables **/
$('.tbl_orders').dataTable( {
/* callback */
"fnInitComplete": function(oSettings, json) {
var thead = $(oSettings.nTHead),
bodyRows = $(oSettings.nTBody).find("tr, TR"),
hdrCols = thead.find( /* all header columns */ );
/* create select */
tableSelectMenu = $('<select name="toggleCols" id="toggleCols" multiple="multiple" data-icon="setup" data-iconpos="notext"></select>')
/* loop through header cols add options */
hdrCols.each(function(i){
var toggle = $('<option value="'+id+'">'+th.text()+'</option>');
tableSelectMenu.append(toggle);
}); // end hdrCols loop
$('.stickSelectHere').append(tableSelectMenu)
}
});
If I do it like this, the select button is there but does not do anything, because the custom-select-menu is missing.
I tried to create the select earlier on pagebeforecreate, because that's where I'm checking for touch devices and assigning data-native-menu="true/false". But putting the select there, also doesn't do any good, maybe because I just create it and don't drop it in the DOM until my tableInit... mh.
Question:
Can someone tell me how to create a select with custom-menu at pagebeforeshow?
Thanks for help!

You likely just need to add the following after your append, i.e.
$('.stickSelectHere').append(tableSelectMenu)
$('#toggleCols').selectmenu('refresh');

Data Tables - columns

are there any way to add new column to the table with JQuery plugin DataTables?

Well it depends on what you need it for... if you just want to have columns hidden, then reveal them at a later time, then you'd do this to toggle the column (from the docs)
function fnShowHide( iCol )
{
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var oTable = $('#example').dataTable();
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}
The plugin doesn't have an interface (as far as I'm aware) for adding columns, but ordinary jQuery seems to do the trick:
$('#example thead tr,#example tfoot tr').append('<th>New title</th>');
$('#example tbody tr').append('<td />');