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.

Javascript put data in columns table

I have a table which I want to put in the data that I get from ajax call in columns instead of rows here is the table body code
<tbody id="tableData-marketMonth">
<tr>
<th>Leads</th>
</tr>
<tr>
<th>Full Year Cost</th>
</tr>
<tr>
<th>{{date('F')}} Share of Cost</th>
</tr>
<tr>
<th>Cost per Lead</th>
</tr>
</tbody>
Here is the JavaScript code that put the data into the table
//Monthly Marketing Cost Report
$.get('/dashboard/costs', function(data){
$.each(data,function(i,value){
var tr =$("<tr/>");
tr.append($("<th/>",{
text : value.olxTotal
})).append($("<th/>",{
text : value.budget_total_year
})).append($("<th/>",{
text : value.budget_total_month
})).append($("<th/>",{
text : value.budget_per_lead
}))
$('#tableData-marketMonth').append(tr);
})
})
this is the current output
Desired output
Thank you very much

and I think I understood what you meant, probably best just to add id's to each <tr> and then append the value to them, like below.
HTML
<table>
<tbody id="tableData-marketMonth">
<tr id="leads">
<th>Leads</th>
</tr>
<tr id="fyc">
<th>Full Year Cost</th>
</tr>
<tr id="soc">
<th>{{date('F')}} Share of Cost</th>
</tr>
<tr id="cpl">
<th>Cost per Lead</th>
</tr>
</tbody>
</table>
JQuery
//Monthly Marketing Cost Report
$.get('/dashboard/costs', function(data){
$.each(data,function(i,value){
var leads = $('#leads');
var budget_total_year = $('#fyc');
var budget_total_month = $('#soc');
var budget_per_lead = $('#cpl');
leads.append('<td>' + value.olxTotal + '</td>');
budget_total_year.append('<td>' + value.budget_total_year + '</td>');
budget_total_month.append('<td>' + value.budget_total_month + '</td>');
budget_per_lead.append('<td>' + value.budget_per_lead + '</td>');
})
})

jQuery Find <th></th> which are not empty with Certain Class Name

I have a script that was working to parse a table to json.
It worked fine like this
<thead id="itemspecthead" class="itemspectheadc">
<tr>
<th class="ishead isheadname">Name</th>
<th class="ishead isheadvalue">Value</th>
</tr>
</thead>
With the script logic:
var headers = [];
$(rows.shift()).find('th:first:not(:empty), th:nth-child(2):not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
But trying to stylize my table, I added a couple other rows to my table header.
<thead id="itemspecthead" class="itemspectheadc">
<tr><td colspan="2" class="tdheader"><span>Item Specifics:</span></td></tr>
<tr><td colspan="2" class="speccaption"><span>(Generated from Unique Values from All Listings)</span><br /></td></tr>
<tr>
<th class="ishead isheadname">Name</th>
<th class="ishead isheadvalue">Value</th>
</tr>
</thead>
If I remove the two extra rows in my thead, the script works fine.
It seems the error is in this logic .find('th:first:not(:empty), th:nth-child(2):not(:empty)')
I've tried changing it to .find('th.ishead:first:not(:empty), and .find('.ishead th:first:not(:empty), to find it via classname with no luck.
How can I target my ishead th rows while keeping the extra colspan="2" rows in my thead?
Here's my onclick function that is now returning name,value,name,value (duplicating it twice for some reason..). This is literally my entire on click function script, I removed everything else.
$(document).on('click', '#editjson', function() {
var headers = [];
$('th.ishead:not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
alert('headers: ' + headers);
console.log(headers);
});
returns name,value,name,value...

Apply :not(:empty) directly to all th (not on any particular-one)
Do like below:-
$(rows.shift()).find('th.ishead:not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
Working sample:-
$(document).ready(function(){
var headers = [];
$('th.ishead:not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
console.log(headers);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead id="itemspecthead" class="itemspectheadc">
<tr><td colspan="2" class="tdheader"><span>Item Specifics:</span></td></tr>
<tr><td colspan="2" class="speccaption"><span>(Generated from Unique Values from All Listings)</span><br /></td></tr>
<tr>
<th class="ishead isheadname">Name</th>
<th class="ishead isheadvalue">Value</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.

How to delete all rows in a footable?

I have a footable that I need to clean. I mean, I need to delete all rows in the footable. Is there any footable function to do that? Or do I need to delete rows one by one?
I tried to reinitialize the table doing this:
$('.footable').footable();
I also have tried to iterate between the rows like this:
var footable = $('table').data('footable');
//This is the problem I don´t know how to get first row in the table.
var row = ??????.parents('tr:first');
var next=row.next();
for (var i=0; i<long-1; i++){
footable.removeRow(next);
next=row.next();
}
footable.removeRow(row);
And my corresponding html source code:
<table class="footable footable-loaded">
<thead>
<tr>
<th>Cantidad</th>
<th>Producto</th>
<th>Precio</th>
<th>Eliminar</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Total</th>
<th id="total">19.5</th>
<th></th>
</tr>
</tfoot>
</table>

You can delete by removeRows() function:
function removeRows(){
$(".footable>tbody>tr").each(function(index, elem){
$(elem).remove();
});
}
DEMO

Try this one
footable.rows.load([])