Develop Reference

not able to change class in jquery

I have a code to calculate some qty in the table which loaded dynamically. And also i have added code to change the class of a if the qty is less than zero. But in my case, that changing the color at one time i.e., in first row not in rest of the rows.
$(document).ready(function() {
$("#itemtable").on("change", "input", function() {
var row = $(this).closest("tr");
var received = parseFloat(row.find("td:eq(5)").text()); // get received qty
var accepted = parseFloat($(row).find("td:eq(6) input[type='text']").val());
if (received < accepted){
alert("Accepted qty greater than received qty, Please check!");
} else {
var rejected = received - accepted;
row.find("td:eq(7) input[type='text']").val(isNaN(rejected) ? "" : rejected);
}
if (rejected > 0){
alert("change class");
$('#rejec').removeClass('tb1').addClass('tb2');
}
});
});

in first row not in rest of the rows
The selector to find the reject text $("#reject") needs to include the row, ie:
$("#rejec", row).removeClass('tb1').addClass('tb2');
or
row.find("#rejec").removeClass('tb1').addClass('tb2');
In general, IDs should be unique - if #rejec is on each row, it will only change the first one (as you've found). Ideally, use classes and filter to the event's row.

as above mentioned , changed this piece of code to get the required result
if (rejected > 0){
row.find("td:eq(7) input[type='text']").removeClass('tb1').addClass('tb2');
}

Jquery Data table Search Option is not enable sorting icon

I am stuck in jquery Data table. if we use jquery data table then it provide by default search option. But problem is that if i search particular record and if content is not match or i found single record. then i need to remove sorting icon. it will work but as i press back space and remove searching content then as usual it display all records. But now sortable icon is disable it needs to enabled once again then what is the solution for that.
This is function call:-
$('#datatable-information').on('draw.dt', function () {
disableSortingSearchOption(oTable, 'datatable-information_filter input');
This is Function Defination:-
function disableSortingSearchOption(oTables, tableClass) {
if (oTables != null) {
var rowCount = oTables.fnSettings().fnRecordsDisplay();
{
if (rowCount == 0 || rowCount == 1) {
var oSettings = oTables.fnSettings();
//Remove sort icon
$('.DataTables_sort_icon').remove();
//Remove hand cursor
$('.datatable th').css('cursor', 'default');
//Iterate through each column and disable sorting
$('.' + tableClass + ' th').each(function (index) {
if ((oSettings.aoColumns[index]) != undefined) {
oSettings.aoColumns[index].bSortable = false;
}
});
}
}
}
}

Here is a simple way to remove the sorting arrows on the table headers and change the pointer to default when the drawed table has 1 line or less.
On more than one line, the table sorting and the pointer comes back to "normal".
My solution is quite different than the code you provided.
function disableSortingSearchOption(oTables) {
if (oTables != null) {
var colCount = 0;
$(oTables).find('th').each(function(){
colCount++;
});
//console.log(colCount+" colunms");
var rowCount = 0;
$(oTables).find('td').each(function(){
rowCount++;
});
rowCount = rowCount/colCount;
//console.log(rowCount+" rows");
if (rowCount <= 1) {
//Remove hand cursor
$(oTables).find('th').css('cursor', 'default');
//Remove sort arrows
$(oTables).find('th').removeClass('sorting');
}else{
//Add hand cursor
$(oTables).find('th').css('cursor', 'pointer');
//Add sort arrows
$(oTables).find('th').addClass('sorting');
}
}
}
We need to know the row amount...
To achieve this, we first count the column amount and the whole table's td amount.
The row amount is the td amount divided by the column amount.
Based on this number, we can add or remove the sorting class on all th and set the cursor.
Note that when there is no result, there is still one line to show "No matching records found". But since there is only 1 td in this case... divided by the colunm count, we have to think about "one or less line".
;)
Have a look at this CodePen.

how to get previously selected rows of a bootstrap dataTable while searching

I have used a bootstrap DataTable to show data. At the same time i have a HTML checkbox as a column of that dataTable. I have a submit button to get the selected checkbox's value to do some stuff. I am fetching the following problem while select checkboxes under searching.
When i select all checkboxes and Click Save button I got all the values. It works as my expectation.
But Unexpected occures when i search via built-in search box of bootstrap dataTable.Here is the pictorial view
In this case when i press Save i got just the two value though all other values are still selected. How can i get all the selected values while searching
Here is my jquery code of Save button of getting the checkboxes value
$("#btnSave").click(function () {
var checkboxes = document.getElementsByName('foo');
var vals = "";
for (var i = 0, n = checkboxes.length; i < n; i++) {
if (checkboxes[i].checked) {
vals += "," + checkboxes[i].value;
}
}
....
//Other stuff
....
}
Please help me.

When you are doing a search, it is going to check only for the rows, that satisfy the given criteria. So your search logic works like this
if(searchCriteria==true)
{
showValue
}
Even if you had previously selected values it won't be showing all of them, because they don't satisfy the given criteria. Now in this case when you click on Save, it is taking only those rows in the datatable which are checked and satisfy the given criteria, as per your java script.
Now if you still wish, that all selected values should be taken in, there is one way you can try, put the selected values in some kind of List or Set, and place the list object in session. So everytime you click on Save, you can retrieve the List from the session. But I really don't see why you would want to do it, unless you need to retrieve the selected values every time.

I got my job done like this
var table = $('#tblReportList').dataTable();
When i was searching through dataTable, i was getting just the selected values matching the search criteria. But the previously selected values was disappeared. To get the previously selected value i used the following code...
table.$('input[type="checkbox"]').each(function () {
if (!$.contains(document, this)) {
if (this.checked) {
previousVal = previousVal + ',' + this.value;
}
}
});
Now, for getting the selected values of search I used the previous code posted before. And that was
var checkboxes = document.getElementsByName('foo');
var vals = "";
for (var i = 0, n = checkboxes.length; i < n; i++) {
if (checkboxes[i].checked) {
vals += "," + checkboxes[i].value;
}
}
So all selected checkbox's values are
var allValues=previousVal+vals;

How to give a unique id for each cell when adding custom columns?

I wrote following code to add a custom column to my table. but i want to add a unique id to each cell in those columns. the format should be a(column no)(cell no>)
ex :- for the column no 4 :- a41, a42, a43, ........
So please can anyone tell me how to do that. Thank You!
$(document).ready(function ()
{
var myform = $('#myform'),
iter = 4;
$('#btnAddCol').click(function () {
myform.find('tr').each(function(){
var trow = $(this);
var colName = $("#txtText").val();
if (colName!="")
{
if(trow.index() === 0){
//trow.append('<td>'+iter+'</td>');
$(this).find('td').eq(5).after('<td>'+colName+iter+'</td>');
}else{
//trow.append('<td><input type="text" name="al'+iter+'"/></td>');
$(this).find('td').eq(5).after('<td><input type="text" id="a'+iter+'" name="a'+iter+'"/></td>');
}
}
});
iter += 1;
});
});

You seem to have code that's modifying the contents of the table (adding cells), which argues fairly strongly against adding an id to every cell, or at least one based on its row/column position, as you have to change them when you add cells to the table.
But if you really want to do that, after your modifications, run a nested loop and assign the ids using the indexes passed into each, overwriting any previous id they may have had:
myform.find("tr").each(function(row) {
$(this).find("td").each(function(col) {
this.id = "a" + row + col;
});
});
(Note that this assumes no nested tables.)

try this
if(trow.index() === 0){
//trow.append('<td>'+iter+'</td>');
$(this).find('td').eq(5).after('<td id="a'+column_no+cell_no+'">'+colName+iter+'</td>');
}else{
//trow.append('<td><input type="text" name="al'+iter+'"/></td>');
$(this).find('td').eq(5).after('<td id="a'+column_no+cell_no+'"><input type="text" id="a'+iter+'" name="a'+iter+'"/></td>');
}
you just have to define and iterate the column_no and cell_no variable

When all other cells are numbered consistently (for example using a data-attribute with value rXcX), you could use something like:
function addColumn(){
$('table tr').each(
function(i, row) {
var nwcell = $('<td>'), previdx;
$(row).append(nwcell);
previdx = nwcell.prev('td').attr('data-cellindex');
nwcell.attr('data-cellindex',
previdx.substr(0,previdx.indexOf('c')+1)
+ (+previdx.substr(-previdx.indexOf('c'))+1));
});
}
Worked out in this jsFiddle

JQuery DataTables How to get selected rows from table when we using paging?

For example I selected (checked) 2 rows from second page than go to first page and select 3 rows. I want get information from 5 selected rows when I stay at first page.
$('tr.row_selected') - not working
Thanks.
Upd.
I created handler somthing like this:
$('#example').find('tr td.sel-checkbox').live("click", function () {
/*code here*/
});
But right now when click event is hadle the row from table is hidding. I think it may be sorting or grouping operation of DataTables. Any idea what I must do with this?

When a checkbox gets selected, store the row information you want in a global object as a Key-Value pair
I don't remember specifically how i did it before but the syntax was something like
$('input[type=checkbox]').click(function()
{
var row = $(this).parent(); //this or something like it, you want the TR element, it's just a matter of how far up you need to go
var columns = row.children(); //these are the td elements
var id = columns[0].val(); //since these are TDs, you may need to go down another element to get to the actual value
if (!this.checked) //becomes checked (not sure may be the other way around, don't remember when this event will get fired)
{
var val1 = columns[1].val();
var val2 = columns[2].val();
myCheckValues[id] =[val1,val2]; //Add the data to your global object which should be declared on document ready
}
else delete myCheckValues[id];
});
When you submit, get the selected rows from your object:
for (var i = 0; i < myCheckValues.length; i++)
...
Sorry, haven't done JS in a long time so code as is might not work but you get the idea.

$('#example').find('tr td.sel-checkbox').live("click", function () {
var data = oTable.fnGetData(this);
// get key and data value from data object
var isSelected = $(this).hasClass('row_selected');
if(isSelected) {
myCheckValues[key] = value;
checkedCount++;
} else {
delete myCheckValues[key];
checkedCount--;
}
});
.....
On submit
if(checkedCount > 0) {
for(var ArrVal in myCheckValues) {
var values = myCheckValues[ArrVal]; // manipulate with checked rows values data
}
}