We Keep Coding

Unable to update through ajax in pagination using DataTable

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

How to select the corresponding page of row datatable

I want to preselect a row in my datatable and I am using the row('#rowID').select() function for that. It does select the row but it doesn't select the corresponding page where that row is.
I know there exists an option displayStart:
$('#example').dataTable( {
"displayStart": 20
} );
to start on a specific page, but it requires the number of the row in the source list not the id of that row.
Is there a way how to initialize the page using the rowID?
EDIT: The data is taken from the server, not in client.

Use row().show() API method to display page containing required row.
Please note that you need to include additional JS file //cdn.datatables.net/plug-ins/1.10.12/api/row().show().js for this API method to work.
table.row(1).show().draw(false);
See this example for code and demonstration.

Select HTML Table Row and Identify DB Record ID

I’m developing a simple CRUD based application for upskilling purposes.
Currently, the application outputs the result of a select query to a HTML table using JSTL. The last column of this table has a Delete link for each record which sends the parameters action=delete&id=1 to the server. The id param value part of the href of these links are obviously dynamically generated with JSTL based on the database record key that is passed into the JSP with the database results.
Instead of having this Delete column, I want the user to “select” a row and click a Delete button at the bottom of the table, which will send the above parameters to the server.
I am unsure how to accomplish the following to achieve this:
(1) In Javascript, how can I allow the user to “select” a table row. I don’t want the table to have radio buttons. The behaviour should be that the user clicks the row, the entire row colour changes and JS retains the index of the selected row. Only one row can be selected at a time. If the user clicks the row again, it becomes deselected, i.e. the colour is returned to its original colour and JS no longer identifies that row index as being highlighted.
(2) If I don’t have a Delete link specific to each db record, how can I identify the key of the db record to be deleted and return this to the server when the Delete button is clicked. For example, currently if the record in the db has an PK of 123456, my JSTL will generate a href action=delete&id=123456 for that specific Delete link. So, how can I link that id to the selected table row without having to actually display that id in the HTML table.

1) There are plenty of ways to do it. I suppose all of them will involve the use of something like var rows = document.getElementsByTagName("tr"); or its jquery (or other framework) equivalent. Or some other selector, maybe by CSS classname, could be used. Followed by a loop in which you deselect all the rows that were not clicked and select only the one that was recently clicked. Changing the color equals just changing the css class assigned to the DOM element basically.
2) You will use Javascript either to append to the DOM an html form with hidden inputs (<input type='hidden'.../>) and then submit it via Javascript (if you're Ok with moving to a different page and back). Or you can use Javascript to send an Ajax request to the delete servlet, and then remove the particular tr from the page when you receive a success response back.

Changing the tabular data to another table using jquery

I tried to implement to display data in a table with the button click. Now I am trying to move the data from the table to the below the continue table. In this code, when I enter the input value from the json object and click the submit button, data will display in a table with a continue button and a empty table below.When I click continue the data in the above table should move to table which is located below the continue button. Here is my code [Sample http://jsfiddle.net/e254w/6/] Can anyone please suggest the idea of implement the scenario?
Krish

One way to approach this would be to remove the row from the first table and append it to the second.
This line finds the second row in the first table, removes it if it exists and appends it to the second table.
$('#datatable').find('tr').eq(1).remove().appendTo($('#seconddatatable'));
updated fiddle
Updated fiddle - this works for me first entering 122233334444, then entering 122223355552

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?