We Keep Coding

How to detect empty table when selecting a row in a jQuery Datatable

Giving a simple table like this
<table id="exampleTable" class="table hover nowrap">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead></table>
Also, using the jQuery Datatable plugin and making the rows selectable, like in this example. The Javascript goes like this:
var exampleTable = $("#exampleTable").DataTable(
{
"bDestroy": true,
"lengthChange": false,
"bPaginate": false
});
$('#exampleTable tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
$('#exampleTable tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
So, when the table is empty, it shows a selectable row which says something like:
No data available in table
How to detect the table is empty and not allow selection on that kind of "message rows"?
Here is a fiddle with the code.

you can check if there is td with the class dataTables_empty like this:
$('#exampleTable tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else if(! $(this).find('td.dataTables_empty').length){
$('#exampleTable').DataTable().rows().nodes().each(function(){
$(this).removeClass('selected');
});
$(this).addClass('selected');
}
} );

You can use the - .row().data() method to see if there is data. if this returns undefined, you can disable selection of the row.
i also think this would be an ideal solution instead of dom traversal which is more expensive. what do you guys think ?
below is the updated fiddle. you can comment the tbody from the html to test it.
Let me know if this helps.
Modified Fiddle

inside your click method, add before everything
if($('#exampleTable tbody tr td').length == 1){
return;
}

DataTables - Create Custom Pagination Style (Load More Style)

I would like to use a pagination style for DataTable's that is mobile friendly, I'd just like a button to load more rows when clicked which will append rows under the current visible rows.
I know this isn't available as a default option in DataTables but I believe it shouldn't be to difficult to create. Has anyone created this pagination method or seen it in use on a DataTable's table?
If not how can I modify the code of my table at https://jsfiddle.net/6k0bshb6/16/ to use this pagination style to make my table mobile friendly.
// This function is for displaying data from HTML "data-child-value" tag in the Child Row.
function format(value) {
return '<div>Hidden Value: ' + value + '</div>';
}
// Initialization of dataTable and settings.
$(document).ready(function () {
var dataTable = $('#example').DataTable({
bLengthChange: false,
"pageLength": 5,
"pagingType": "simple",
"order": [[ 7, "asc" ]],
"columnDefs": [
{
"targets": [ 5 ],
"visible": false,
"searchable": true
},
{
"targets": [ 6 ],
"visible": false,
"searchable": true
},
{
"targets": [ 7 ],
"visible": false,
"searchable": true
}
],
// Dropdown filter function for dataTable from hidden column number 5 for filtering gifts.
initComplete: function () {
this.api().columns(5).every(function () {
var column = this;
var select = $('<select><option value="">Show all</option></select>')
.appendTo($("#control-panel").find("div").eq(1))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val());
column.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
// This function is for handling Child Rows.
$('#example').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = dataTable.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format(tr.data('child-value'))).show();
tr.addClass('shown');
}
});
// Checkbox filter function below is for filtering hidden column 6 to show Free Handsets only.
$('#checkbox-filter').on('change', function() {
dataTable.draw();
});
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var target = '£0.00';
var position = data[6]; // use data for the position column
if($('#checkbox-filter').is(":checked")) {
if (target === position) {
return true;
}
return false;
}
return true;
}
);
});
UPDATE: I have found some information on how to do this on the DataTables website although I don't fully understand how to integrate it into my table.
https://datatables.net/forums/discussion/3920/twitter-facebook-style-pagination
What you could possibly do (I've not tried it, but I can't think of why it wouldn't work...) is to set the scroll loading gap (the number of pixels before the bottom of the scroll for when the new data is loaded) to a negative number ( http://datatables.net/usage/options#iScrollLoadGap ) and then add a little button at the bottom of the table (might need to use fnDrawCallback for that) which when clicked will load the next data set (fnPageChange('next') should do that).
Anyone know how I can make this work with my table? Could someone show me how to do this on jsfiddle?
UPDATE 2: Response from datatables admin https://datatables.net/forums/discussion/35148/load-more-style-twitter-style-pagination-custom#latest
The iScrollLoadGap option you mention isn't available in 1.10 -
infinite scrolling was removed in 1.10 and that option with it.
However the basic principle still remains - you can either have a
button the user needs to press to load more rows (either increase the
page size or use rows.add() to add more rows) or use a scroll
detection to do the same thing.
Allan

Solved..
<button id="button" type="button">Page +5</button>
//Alternative pagination
$('#button').on( 'click', function () {
var VisibleRows = $('#example>tbody>tr:visible').length;
var i = VisibleRows + 5;
dataTable.page.len( i ).draw();
} );

you could use something like:
$(window).on("swipeleft", $("#example_next").click());
$(window).on("swiperight", $("#example_previous").click());
it will only work on mobile and uses your existing functionality...

Button click function not working on datatable toolbar custom button

As continuation to this question,
Myself added the toggle button to datatable toolbar dom element as
"dom": "T<'clear'><'row DatatableRow'<'col-xs-3'l><'col-xs-3'><'col-xs-3'<'#ToggleButton'>><'col-xs-3 text-right'f>r>t<'row DatatableRow'<'col-xs-3'i><'col-xs-3'><'col-xs-3'><'col-xs-3 text-right'p>>"
and button is added as
$("div#ToggleButton").html('<br/><button type="button" class="btn btn-primary btn-sm" id="ToggleColumns">Toggle</button>');
But in this case, the click function is not working?

It was not working because you were trying to bind a button that is not yet existed on DOM. And you are recreating the table to change the fixed column index. I cant say this is a good way but i couldnt find to change fixed column of rendered datatable on documentations.
but i fixed your fiddle on your way.
the idea is to bind the button on init of datatable right after adding the custom button html like.
$(document).ready(function () {
foo(2);
function foo(columnNumber) {
table = $('#example').on('init.dt', function () {
$("div#ToggleButton").html('<br/><button type="button" class="btn btn-primary btn-sm" id="ToggleColumns">Toggle</button>');
$('#ToggleColumns').click(function () {
table.destroy();
debugger;
if (columnNumber == 2) {
columnNumber = 0;
} else {
columnNumber = 2;
}
foo(columnNumber);
});
}).DataTable({
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
"dom": "T<'clear'><'row DatatableRow'<'col-xs-3'l><'col-xs-3'><'col-xs-3'<'#ToggleButton'>><'col-xs-3 text-right'f>r>t<'row DatatableRow'<'col-xs-3'i><'col-xs-3'><'col-xs-3'><'col-xs-3 text-right'p>>",
});
new $.fn.dataTable.FixedColumns(table, {
leftColumns: columnNumber
// rightColumns: 1
});
}
});
If you can find a way to change the fixedColumn number...
$('#ToggleColumns').click(function () {
// replace the following codes with changing fixedColumn columns
table.destroy();
if (columnNumber == 2) {
columnNumber = 0;
} else {
columnNumber = 2;
}
foo(columnNumber);
});

Strange checkbox click function issue

Using datatables. The problem is $('.checkbox') click function only works on first page of datatables, nowhere else. Note that, $('#check_all') works on every page.
JS looks like that:
function changeQt(){
if($('#quantity').is(':hidden'))
$('#quantity').fadeIn("slow");
$('#quantity').animate({
borderColor: "#00a9e0"
}, 'fast').text(totalqt).delay(400).animate({
borderColor: "#fff"
}, 'fast');
}
function doIt(obj) {
if ($(obj).is(":checked")) {
$(obj).closest("tr").not('#hdr').addClass("row_selected");
totalqt=totalqt + parseInt($(obj).closest("tr").find("#qt").text(), 10);
}
else {
$(obj).closest("tr").not('#hdr').removeClass("row_selected");
totalqt=totalqt - parseInt($(obj).closest("tr").find("#qt").text(), 10);
if(totalqt<0) totalqt=0;
}
}
function checkAllCheckboxes(isChecked) {
if(isChecked ){
totalqt=0;
}
$('.checkbox').each(function(){
$(this).prop('checked', isChecked);
doIt(this);
});
changeQt();
}
$(document).delegate('td.item_id', 'click', function(e){
e.stopPropagation();
});
$(document).delegate('#list > tbody > tr', 'click', function(){
window.open($(this).attr("url"));
});
$(document).ready(function() {
$("input:submit, input:reset").button();
$.datepicker.regional[""].dateFormat = 'dd.mm.yy';
$.datepicker.setDefaults($.datepicker.regional['']);
$('select[name=list_length]').change(function(){
if ($('#check_all').is(':checked'))
$('#check_all').click();
});
var oTable= $('#list').dataTable( {
"bJQueryUI": true,
"iDisplayLength": 25,
"aaSorting": [],
"aoColumns": [
{
"bSortable": false
},
null, null, null,null,null, null, null
]
} ).columnFilter({
sPlaceHolder: "head:before",
aoColumns: [ null, null, null,null,null, null, null,
{
type: "date-range"
}
]
});
$('.checkbox').click(function(e) {
e.stopPropagation();
doIt(this);
changeQt()
});
$('select[name=list_length]').change(function(){
if($('#check_all').is(':checked')){
$('#check_all').prop('checked', false);
checkAllCheckboxes(false);
}
});
$('#check_all').click(function(){
checkAllCheckboxes(this.checked);
});
});
Here is 1 row from this table:
<tr url="?page=item&id=1411">
<td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="1411" class="checkbox"/> 1411</td>
<td> 9814</td>
<td style="text-align:center">BK</td>
<td style="text-align:center">36</td>
<td style="text-align:center" id="qt">1</td>
<td style="text-align:center">15</td>
<td style="text-align:center">12</td>
<td>15.02.2012</td>
</tr>
If someone want to see page in action, please join discussion: Here.

I assume dataTables is adding/removing elements from the DOM, and with them will go the event handlers attached to them.
Instead of attaching events by the shortcuts (eg click(), or blur()) which will only work when the element in question is available on page load, use delegate() (or on() in jQuery 1.7+)
$("#list").delegate('.checkbox', 'click', function(e) {
e.stopPropagation();
doIt(this);
changeQt()
});
jQ 1.7+
$("#list").on('click', '.checkbox', function(e) {
e.stopPropagation();
doIt(this);
changeQt()
});

The FAQ about events will be of some use to you here: http://datatables.net/faqs#events . It also includes examples of how to apply the solution. In this case I would suggest using:
table.$('.checkbox').click(function(e) {
where table is the DataTables instance. The $ API method will give you a jQuery object that will operate on all rows in the table, regardless of current paging.

jQuery datatables and jScrollPane - table header doesn't scroll

I tried to have jquery datatables and jScrollpane work together, it went well but one thing..
when I scroll the table to the right, the header doesn't seem to get along.
here's my code snippet on my html:
$("#my-table").dataTables({
// ...
"sScrollX": "100%",
"sScrollXInner": "150%",
"fnDrawCallback": function(){
$('.dataTables_scrollBody').jScrollPane();
}
});
does anyone have an idea?
any help would be appreciated :)
thanks..

This answer is already a bit old, but I just had the same problem. I solved it using the jScrollPane events that are fired. When the table body scrolls, this event is noticed and the table header is manually set to the correct position.
$('table.selection_list').dataTable({
sScrollY: '300px',
sScrollX: '100%',
sScrollXInner: '320%',
bPaginate: false,
bInfo: false,
bFilter: false,
"fnInitComplete": function() {
var table_header,
_this = this;
table_header = $('.dataTables_scrollHeadInner').css('position', 'relative');
$('body.admin.selections_index').find('.dataTables_scrollBody').bind('jsp-scroll-x', function(event, scrollPositionX, isAtLeft, isAtRight) {
table_header.css('right', scrollPositionX);
}).jScrollPane();
}
});

I am using bScrollInfinite and changed little bit your code:
fnDrawCallback: function() {
table_header = $('.dataTables_scrollHeadInner').css('position', 'relative');
$('body').find('.dataTables_scrollBody').bind('jsp-scroll-y',
function(event, scrollPositionY, isAtTop, isAtBottom) {
table_header.css('bottom', scrollPositionY);
}).jScrollPane({
verticalDragMinHeight: 15,
verticalDragMaxHeight: 15,
autoReinitialise: true
});
}
But dont know how to tell the table, that I am on the end of table and want to load another data set:(