Develop Reference

Cant hide items per page and pagination in datatable when less then number displayed

I have a Datatable which if 1 page is returned i want to hide the 'Items per pages' dropdown list and also the pagination. This also needs to work when filtering the table.
I am using the:
.DataTable().page.info()
Below is the code i have
"fnDrawCallback": function () {
var accountSearchDataTableInfo = $('#accountSearchDataTable').DataTable().page.info();
if (accountSearchDataTableInfo.pages == '1') {
console.log(accountSearchDataTableInfo.pages == '1')
$('#accountSearchDataTable_length').hide();
$('#accountSearchDataTable_paginate').hide();
}
if (accountSearchDataTableInfo.pages == 1) {
console.log(accountSearchDataTableInfo.pages == 1)
$('#accountSearchDataTable_length').hide();
$('#accountSearchDataTable_paginate').hide();
}
}
And this gives...
Initial table load table info
Filtered table info
As you can see from my IF i have tried a number and string but when i do console.log on these it comes back true but the items are still displayed.
I have tried .hide() and also .css('display', 'none') but nothing seems to be working and i'm at a loss what else to try.
When i look at the element in Dev tools the style attribute is added but nothing after it:
Initial table load
Filtered table

Found the solution. I was looking for the parent DIV but it appear that if i used each individual identifier i can hide them. so my IF now look like
if (accountSearchDataTableInfo.pages == '1') {
$('.mb-2').hide(); // Items per page DD
$('#accountSearchDataTable_previous').hide(); // Pagintator 'Previous' button
$('#accountSearchDataTable_next').hide(); // Pagintator 'Next' button
$('.paginate_button').hide(); // Pagintator page '1' button
}

You can use below api to determine pages number
table.api().page.info().pages
As stated in documentation:
https://datatables.net/reference/api/page.info()
And use drawCallback() after table is draw As documented here:
https://datatables.net/reference/option/drawCallback
Example how to hide pagination when page is 1 or less:
$('#example').dataTable( {
"drawCallback": function( settings ) {
var api = this.api();
var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
pagination.toggle(api.page.info().pages > 1);
}
} );

Alert if class is used more than once?

In the following Fiddle, you can click to select rows in the table. If you click the 'Execute' button, an alert will tell you if the class .row_selected is visible or not. This is all working, now I need to elaborate on the rows selected part. The user can only 'Execute' one row at a time, so if one row is selected - yay. If more than one are selected, an error message asking to select only one row. One row to rule them all. Any ideas?
http://jsfiddle.net/BWCBX/34/
jQuery
$("button").click(function () {
if ($(".row_selected").is(":visible")) {
alert('Row(s) are selected.')
} else {
alert('No rows are selected.')
}
});

Add a condition with .length see below,
if ($(".row_selected").length > 1) { //more than one row selected
alert('Please select one row');
} else if ($(".row_selected").length) { //one row selected
alert('Row(s) are selected.')
} else { // none selected
alert('No rows are selected.')
}
Seems like the row_selected is applied to the row only on selection so you don't need :visible check.
DEMO: http://jsfiddle.net/7wrJC/

You can use the following code to get the number of the selected rows:
if (1 === $(".row_selected:visible").length) {
// do something
}

Tables jQuery/Javascript

I have two issues. I am trying to dynamically create tables when the "enter" button is pressed.
function commandLine() {
$('#write').bind('keypress', function (e) {
if (e.keyCode == 13) {
var $table = $('<table>');
//tbody
var $tbody = $table.append('<tbody />').children('tbody');
// add row
$tbody.append('<tr />').children('tr:last')
.append("<td>Router#</td>");
// add table to dom
$table.appendTo('#console');
}
});
}
This code works however when I hit enter I get 3 rows and no columns. I need to hit enter and get 1 row with 2 columns. Please help!

Well, I am getting it perfectly fine here. You haven't specified the second column or whatsoever. In your code, the column thing is here:
$tbody.append('<tr />').children('tr:last')
.append("<td>Router#</td>").append("<td>Column 2</td>");
// ^ Add second column's cell
Fiddle: http://jsfiddle.net/praveenscience/EZpgF/

Javascript placing table rows between rows with greater and smaller ID

I'm building a system which outputs a list of cars on a screen(in a table element). The page loads the updates automatically with an HTTP call to the server.
Every car has an ID, a status and some irrelevant things.
Now when the user loads the page, the cars without the statuses 'maintenance' and 'wrecked' are shown and every five seconds new JSON data will be loaded from the server. If there comes a car out of the maintenance this one should be added to the table. The table is sorted by the car id and here comes the problem.
I have written a bit of pseudo code to clarify my problem:
if (row_with_greater_id_exits && row_with_lower_id_exists) {
place_row_between_firstRowWithGreaterId_and_FirstRowWithLowerId();
} else if (is_row_with_greater_id) {
jQuery('table#cars tbody').append(generatedHtml);
} else if (is_row_with_lower_id) {
jQuery('table#cars tbody').prepend(generatedHtml);
}
The problem is I don't know how to find the first row with a greater id or the first row with a smaller ID. The ID's are not always succeeding because some cars are wrecked and have the status wrecked.
I hope someone here has had a similar problem and can help me on my way to the solution.
Many thanks in advance!

You need to loop over the rows, and compare the ids. When your new row has and ID less than the current row in the loop, insert the new row before the current row, and break the loop.
rows.each(function(i, el) {
if (+newrow.id < +el.id) {
$(el).before(newrow);
return false;
}
})
if (!newrow.parentNode)
rows.parent().append(newrow);
This code assumes rows is a jQuery object that has a collection of all the rows, and newrow is a DOM element representing the new row.
Also assumes that the IDs are simple numbers. Note that numeric IDs are only valid in HTML5.
Personally, I'd just use the native API for this:
var tbody = document.querySelector("tbody");
tbody.insertBefore(newrow, [].reduce.call(tbody.rows, function(bef, el) {
return bef || +newrow.id > +el.id ? bef : el;
}, null));
No need to test for the isFirstLoad. When the tbody is empty, it'll still work. But you'll need a .reduce() shim for older browsers.

I have this: id="car-1" data-id="1"
I'll assume that data attribute is on the tr elements. Obviously you can adapt the following if it is on a cell within a row.
Loop through the table checking each row's id, and insert the new row immediately before the first row that has an id greater than the new one:
// assume newId is the new ID, somehow set from your JSON
var rowInserted = false;
jQuery('#invoices-outstanding tbody tr').each(function() {
var $row = $(this);
if (+$row.attr("data-id") > newId) {
$row.before(generatedHtml);
rowInserted = true;
// break out of each loop
return false;
}
});
if (!rowInserted)
jQuery('#invoices-outstanding tbody').append(generatedHtml);

jquery select and exclude multiple nth-childs

Is there a way that i can select multiple nth-childs at once like:
$("#table").find("tr > :not(td:nth-child(1,3,5))");
which doesn't work
I want to select all td in each row but not for column 1,3,5 (this can be any combination).
Is there a way to do this? I cannot assign classnames.
thanks for any help!
UPDATE:
I want to search in all rows of a table, but exclude some columns.
I have this code right now:
elem.keyup(function() {
$(options.table).find("tr").hide();
var data = this.value.split(" ");
var jo = $(options.table).find("tr > :not(td:nth-child("+cols+"))");
$.each(data, function(i, v){
jo = jo.filter(":containsIgnoreCase('"+v+"')");
});
jo.parent().show();
});
It works when I pass a single value, but i want to exclude multiple columns.
thanks

From your example, it looks like you're trying to exclude the odd numbers. Try:
$("#table").find("tr > :not(td:nth-child(odd))");
Although, it may be more efficient to just select the even ones.
$("#table").find("tr > td:nth-child(even)");
You can also use formulas in nth-child. See this link for more detail.
Okay, as per comments below/clarification on the question, here is another solution.
$("#table").find("tr > td").filter(function(index){
return index == 1 || index == 2 || index == 5;
});