Get data of all rows and extract input values, tr.data() of td.data() attritubes

user_2672490 0
Viewed 875

I am trying to use DataTables and trying to see if i can get it implemented onto my site.

I've tried searching the DataTables and Stack Overflow forums and Googling, but haven't found anything yet that answers my question. Probably I've read over it somewhere, but I am hoping someone will help me.

Case

  • a large number or table rows with 10 inputs on every table row (tr)
  • what i need: to get all the input values for every row (visible or not) WITH the tr.data() and/or td.data() that might be set for that row.

Right now I am using this:

$('#example').DataTable().rows().data().toArray()

and getting this for every row:

["<input type=\"text\" value=\"0\">", "<input type=\"text\" value=\"0\">", "<input type=\"text\" value=\"0\">", "<input type=\"text\" value=\"0\">", "<input type=\"text\" value=\"0\">"]

a) I don't see the data() attribute that was attached to that row, how to get it?

b) how can I get the value of for instance row 0, first input? In jQuery I would use $('tr').first().find('input').val() or give it an id but how can I do something like that with the DataTables output? looking at what the above output gives me, i have no idea yet how to accomplish that. (So for all rows, not only the visible ones)

Not every row is in the DOM, so there must an object or something holding all table rows from where I can extract the value for every input on every table row and also get their data() attribute.

datatables html jquery
2 Answers

You mentioned that you are familiar with approaches such as jQuery's $('tr').first().find('input').val().

To use something like that, you can use the following:

table.rows().every( function ( rowIdx ) {
  var firstVal = $( this.node() ).first().find('input').val();
  console.log( 'Row ' + (rowIdx+1)  + ' first value: ' + firstVal );
} );

Here, we iterate over every row in the DataTable regardless of whether the row is on the currently displayed page, or not. This means we access data which is in the DataTable, but which may not be displayed in the DOM.

We get a node object using row().node() and then use that in a jQuery selector.

My test table:

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>One</th>
                <th>Two</th>
                <th>Three</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" value="X"></td>
                <td><input type="text" value="Y"></td>
                <td><input type="text" value="Z"></td>
            </tr>
            <tr>
                <td><input type="text" value="D"></td>
                <td><input type="text" value="E"></td>
                <td><input type="text" value="F"></td>
            </tr>
            <tr>
                <td><input type="text" value="P"></td>
                <td><input type="text" value="Q"></td>
                <td><input type="text" value="R"></td>
            </tr>
        </tbody>
    </table>

My DataTable:

var table = $('#example').DataTable( {
  "lengthMenu": [ 2 ] // just to force 2 pages of data
} );

The console output:

Row 1 first value: X
Row 2 first value: D
Row 3 first value: P

You can obviously improve this to use jQuery to process every field in each node - not just the first field.

The order in which the rows are iterated is based on the current display order (i.e. taking sorting into account).

You can also iterate the data based on the original load order of the data:

table.rows( {order: 'index'} ).every( ... );

This causes the internally assigned DataTables row index to be used. This index value does not change when data is sorted.

See selector modifiers for details.

user_125673650

you can use children(). this must be return all td of tr.

if you want more help please give more information for your code

user_135805720
Related