Develop Reference

How to get table records from a table with multiple pages?

I have a table with pagination using DataTables. I am trying to display the table records in a Bootstrap modal. The problem is that I can only get records from the first page which displays only 10 records. I can't get records from the second and other pages; it keeps displaying the last record I chose from the first page.
There might be a method I am missing to get the values from the following pages.
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Product Name</th>
<th scope="col">Supplier</th>
<th scope="col">Volume</th>
<th scope="col">Quantity</th>
<th scope="col">Buying Price</th>
<th scope="col">Selling Price</th>
<th scope="col">Expiry Date</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php include "include/read.inc.php"?>
</tbody>
</table>
$(document).ready(function() {
$('.table').DataTable();
$('.editbtn').on('click', function() {
$('#editModal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children('td').map(function() {
return $(this).text();
}).get();
console.log(data);
var str = data[3];
var res1 = str.match(/[0-9]/);
var res2 = str.match(/[a-z]+/i);
$('#id').val(data[0]);
$('#name').val(data[1]);
$('#supplier').val(data[2]);
$('#vol').val(res1);
$('#unit').val(res2);
$('#qty').val(data[4]);
$('#bprice').val(data[5]);
$('#sprice').val(data[6]);
$('#editExpDate').val(data[7]);
});
});

Appreciations #freedomn-m for your contributions, I finally figured out the problem, it lied on the selector line, I had to include the button selector inside the on('click', 'button_selector', function()); to look something like this
$('.table').on('click','.editBtn', function(){
$tr = $(this).closest('tr');
var data = $tr.children('td').map(function(){
return $(this).text();
}).get();
Regards.

asp.net mvc Hide column used for filter

i have a table that i filter using a checkbox based on a column field bool "isAdmin" - when checkbox is checked, i see all orders, when unchecked,
i only see orders with isAdmin = true.
this is working as expected,
but i want isAdmin (first column) to be hidden, but i can't remove it since
i want to use it for the filtering.
View Html:
<table id="tblData" class="table table-striped table-bordered" style="width:100%">
<div id="AllOrders">
<input type="checkbox" id="pos" value=true /> Show All Orders
</div>
<thead class="thead-dark">
<tr class="table-info">
<th>Is Admin</th>
<th>Order Id</th>
<th>Order Status</th>
<th>Product</th>
<th>US Date</th>
<th>Store</th>
<th>Quantity</th>
<th>Full Address</th>
<th>Tracking Number</th>
<th></th>
</thead>
#{string FullAddress = "";}
#foreach (Order order in Model.Order)
{
FullAddress = "";
<tr>
<td>#order.IsAdmin</td>
<td>#order.Id</td>
<td>#order.OrderStatus</td>
.
.
.
.
</table>
Javascript that control the checkbox in the section script:
<script>
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var isAdmin = data[0];
if ($('#pos').prop("checked") == true) {
return true;
} else if ($('#pos').prop("checked") == false && isAdmin) {
return true;
}
else { return false; }
}
);
$('input:checkbox').on('change', function () {
var table = $('#tblData').DataTable();
table.draw();
});
</script>

Datatable undefined error obtaining row data

I'm having an error getting the data of a row in Datatables and I can't figure it out why it's happening.
Reading the Docs, getting the row data it's as simple as:
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
console.log( table.row( this ).data() );
} );
So, I've a Jinja2 template that it's filled in server-side (in Python 3 using flask):
<table id="table" class="dataTable display responsive nowrap" cellspacing="0" width="100%">
<thead>
.....
</thead>
<tbody>
.....
</tbody>
</table>
And I initialize the Datatable with:
function createDatatable() {
$('#table').DataTable({
"select": "single",
"order": [[2, "asc"]],
"language": {.....}
}
});
}
And attach some events:
function attachEvents() {
$('#table tbody').on('click', 'td.tdCredits', function () {
var table = $('#table').DataTable();
var rowId = table.row(this).data()[0];
});
.....
}
Then I do:
$(document).ready(function() {
createDatatable();
attachEvents();
});
So, when I want to get the data of the row that I've clicked (regardless of whether it is selected or not) with this code I get an error on the console:
TypeError: table.row(...).data(...) is undefined
What I'm doing wrong? Because I can see the table rendered, with the pagination buttons and I can order the columns as well.
$(document).ready(function() {
createDatatable();
attachEvents();
});
function createDatatable() {
$('#table').DataTable({
"select": "single",
"order": [[2, "asc"]]
});
}
function attachEvents() {
$('#table tbody').on('click', 'td.tdCredits', function () {
var table = $('#table').DataTable();
var rowData = table.row(this).data();
console.log('Clicked row data: ' + rowData);
var rowId = table.row(this).id();
console.log('Clicked row id: ' + rowId);
// Other code
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="table" class="dataTable display responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th style="display: none;"></th>
<th class="text-center">Header 1</th>
<th class="text-center">Header 2</th>
<th class="text-center">Header 3</th>
<th class="text-center">Header 4</th>
<th class="text-center">Header 5</th>
<th class="text-center">Header 6</th>
<th class="text-center">Header 7</th>
</tr>
</thead>
<tbody>
<tr id="someId" class="filter">
<td style="display: none;"></td>
<td class="text-center">Cell 1</td>
<td class="text-center">Cell 2</td>
<td class="text-center">Cell 3</td>
<td class="text-center">Cell 4</td>
<td class="text-center tdCredits">Click here</td>
<td class="text-center">Cell 6</td>
<td class="text-center">Cell 7</td>
</tr>
</tbody>
</table>

You have a typo. Your variable is initialized as "table" and then you call "tabla". "Tabla" does not exist so it is undefined.
$('#table tbody').on('click', 'td.tdCredits', function () {
var table = $('#table').DataTable();
var rowId = table.row(this).data()[0];
});

Ok, I've found a trick that solved my problem and I don't need to access the '.data()'.
The problem I was having is due as you can edit some fields on each row, so the first time you click in one of the filds of the row, the row it's selected so you can use:
table.row({ selected: true }).index();
But if you click again on other field, the row is deselected and the filter selected:true doesn't work.
Doing the fiddle I discovered that Datatables uses the ID specified in
<tr id="someId" ..>
instead of some internal value. So I pass the ID value to my method and force the row to be selected:
table.row('#' + id).select();
And then I can use:
var rowIndex = table.row({ selected: true }).index();
And update the proper field instead the field of the first visible row:
table.cell({row:rowIndex, column:columnIndex}).data(newValue).draw();
Regards!

You are using array notation data[0] to access your data. But maybe you defined columns.data which means your data is an object.
you can use this.
data["nameofYourColumn"]

datatables use select-checkbox to get selected id and post via ajax easier way

How can I use datatables select-checkbox? The code below is for clicking table rows to get selected rows, but i want to do with datatables select checkbox and than post the values by ajax.
Jquery:
$(document).ready(function() {
var selected = [];
$("#example").DataTable({
"processing": true,
"serverSide": true,
"ajax": "scripts/ids-arrays.php",
"rowCallback": function( row, data ) {
if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
$(row).addClass('selected');
}
}
});
$('#example tbody').on('click', 'tr', function () {
var id = this.id;
var index = $.inArray(id, selected);
if ( index === -1 ) {
selected.push( id );
} else {
selected.splice( index, 1 );
}
$(this).toggleClass('selected');
} );
} );
html:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Id </th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>

not able to get the table row value with specific class name

I have a below table code. I would like to get the table row value which has class as"highlight", below is the code which i tried but i am getting null. Please someone help.
table name = itemtable; table rows will be loaded dynamically using jquery.
<table cellspacing="0" cellpadding="0" id="itemtable" class="t1" border="1px">
<thead>
<tr>
<th> SLno</th>
<th>Item code</th>
<th>Item name</th>
<th>Received qty</th>
<th>Insp Date</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</thead>
<tbody></tbody>
</table>
using below code to highlight the row using class ".highlight" when user db click on itemtable row.
$(document).on("dblclick", "#itemtable tr", function (e) {
//high light the table row
$('#itemtable tr').not(this).removeClass('highlight');
$(this).toggleClass('highlight');
});
now i am trying to get one of the value say first , which has class as highlight( ie row which is selected) in another flow of program (after highlight).
var selectedrow = $('#itemtable tr.highlight');
var slno = $(this).closest("tr").find('td:eq(2)').text();

Like this?
var selectedRow = $('#itemtable tr.highlight');
var slno = selectedRow.find('td:eq(2)').text();

Below code is working.
var selectedrow = $('.highlight');
var slno = selectedrow.closest("tr").find('td:eq(0)').text();

It totally depends on the ajax response. It would be better if you had share the ajax code. Though try with below code:
<table id="itemtable">
<thead>
<tr>
<th>SLno</th>
<th>Item code</th>
<th>Item name</th>
<th>Received qty</th>
<th>Insp Date</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
...Your ajax response will append here...
</tbody>
</table>
JQuery Code:
$(document).ready(function(){
setTimeout(function(){
$('table#itemtable').find('tr.highlight').each(function(i, v){
$(v).find('td').each(function(v1){
console.log($(this).text());
});
});
}, 4000);
});
Let me know if it works for you. I have added a fiddle.