Unable to update through ajax in pagination using DataTable - javascript

I am using a Datatable plugin for using pagination on my HTML table. I have a checkbox to select different rows across different pages. Each row has a unique id. But when I need to update the row cells after ajax call, JS cannot recognize the element by ID if presently I am not on that row's page. It basically returns null when I do:-
document.getElementById('xyz').
The current page rows are updated but not the rows on other pages. Please help me with this.

DataTables row selector is optimised for IDs as it is natural to wish to select rows by unique information. This is distinct from a jQuery selector as DataTables can optimise this selector type so as to not involve the DOM - also allowing an id row selector to operate on rows which have not yet had their DOM nodes created (when using deferRender for extra speed).
With dynamically sourced data, the id assigned to the row is identifier using the rowId option. The data used as the id can be of any value, although it must be unique in the table.
To use an id selector, simply prefix the id value for the row you wish to select with a number sign: #. The value that follows is taken as the id. Unlike jQuery this value does not need to be escaped - although this means that an id selector must be used alone (e.g. a class name cannot also be used), it does make is much easier to use for complex data.
Select a single row by id:
var table = $('#example').DataTable();
var row = table.row('#row-42');
Select multiple rows by id:
var table = $('#example').DataTable();
var rows = table.rows( [ '#row-42', '#row-51' ] );
Source: https://datatables.net/reference/type/row-selector

Related

Extract a row from table

I am trying to extract a specific row of data from a table in a live webpage using the following code.
requestCrossDomain('https://eosweb.larc.nasa.gov/cgi-bin/sse/grid.cgi?&num=197110&lat=23&submit=Submit&hgt=100&veg=17&sitelev=&email=skip#larc.nasa.gov&p=grid_id&p=T10M&p=DLYRANGE&step=2&lon=16', function(results) {
$('#loadedContent').css("display","").html(results);
//alert($($('#loadedContent table')[4]).text());
//The above line parses the table i need and displays the content in an alert box.
//But when I try the same line of code to display a specific row, it doesnt display anything
alert($($('#loadedContent table tr:eq(2)')[4]).text());
});
Note that the Website does not assign a name or id to the tables in its page. so I try to extract the table using the position. I am quite successful until this. But when i try to extract a specific row of data from the table. I could not. What should I do to extract a row of data from the table.
P.S: there are multiple tables in the page and none of it is assigned a name or id
You can use :eq() selector here
alert($('#loadedContent table:eq(4) tr:eq(2)').text());
This will select 3rd tr inside 5th table

How to add the value to a specific row data in table(Parent) from child page using javascript?

I have two pages First.html and Second.html. In Second.html i have one search button that redirect to second.html and once I choose the value it will populate the value in first.html. But the problem is in first.html the table has two id ="major". Based on the search button it will populate the value in the particular major box. How to achieve this ?
You can access two different elements with same id like this:
var table=$("table#major");
var inputelement=$("input#major");
As the comment suggested, IDs should be unique in your HTML. To determine which row you want to manipulate, use the ID from the table and use the table's rows collection...
document.getElementById("Major").rows[rowNumber].cells[1].children[0].value;
...rowNumber will probably need to be manipulated to ensure you are on the correct row. With your code, the first row you care about is row 2.

jqGrid: Hiding a row while sorting

I have a custom sort on a few columns of data in my grid. I'm trying to hide some of the rows of data based on their value while I'm doing the sort. In the function, I have the cell value and the row object, but I don't see the row ID which is what I was going to use to hide that row of data. Is there a way to get the row ID, or is there a better way to attack hiding rows while sorting?
The grid content will be reloaded during sorting. So you can use rowattr to set some attributes on the rows. Inside of rowattr callback you have access to the object which represent the data of the row. Look at the answer. It adds CSS class myAltRowClass to some rows based on the content from one specific column. You can do the same. You need just defines display: none to CSS class myAltRowClass. Alternatively rowattr callback can return {"style": "display: none"}; on some rows.

jQuery selector for next div by class in a table cell

I have tried many things but none seem to work.
What I am trying to do is create a database that will store serial numbers for all the stock I receive, I can get the basic functions to work.
Within the HTML I have a Javascript function that adds extra serial number fields according to the qty input.
My only problem is that when I add another product field to the table and change its qty field, it adds the extra fields to all of the serial number cells.
All I need is help with finding the right selector for the next div with the class ".serials".
jsFiddle:
http://jsfiddle.net/AvKRW/10/
$(".serials").append("<input type='text' name='serial[]' id='serial-number' /><br />");
The issue is that you are finding all elements with the specified class and appending to all of them.
Are you looking for:
$(".serials").last ()
Alternatively you could use
$(".serials").eq (INDEX)
The latter should enable you to append to only one of the serial boxes based on index.
It appears that parsing the dom tree of html elements would allow you to filter your selection of html elements to just the few you require. please see changes I have made to your jsfiddle:
http://jsfiddle.net/AvKRW/7/

How to add a row below the currently selected row (based on a dropdown input) using jQuery?

I have a table with a bunch of rows. In the last column of every row, there is a dropdown. When the dropdown changes, I need a new table row to appear below the row where the user selected the dropdown item. However, I also need the new row to have different data depending on what was selected in the dropdown.
Is any of this possible using only jQuery?
Note that I'm using ASP.NET for back-end development, so if a solution can be found without using ID's that would be great.
$("table select").live("click",function(){
var row=$(this).parent().parent();//add some .parent() untill you get the TR element
var val=$(this).val(); //<select> value if you want to use it for some conditions
$("<tr><td>....</td></tr>").insertAfter(row);
})
It's simple enough to add the HTML using JQuery. However, if you intend to save this data back to the server, the default ASP.NET process (using ViewState) will ignore the new rows. Instead, you would need to directly read the submitted form properties.
To learn how to add a row, look at the suggestions here: How to add a new row to a specified table with jQuery?

Categories