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.

How to get multiple checkbox checked value in jquery datatable

On Button Click, I want to get the multiple row selected value from the datatables. From my below code, I only get the first row selected value.
function AssignVendor() {
var table = $(assignVendor).DataTable();
var data = table
.row({ selected: true })
.data();
}
<table id="assignVender" class="mp myTable table table-striped table-bordered" cellspacing="0" width="100%" ui-jq="dataTable" ui-options="dataTableOpt">
<thead>
<tr>
<th class="select-checkbox"></th>
<th>MP Name</th>
<th>MP Code</th>
<th>Vendor Name</th>
<th>Vendor Code</th>
<th>From Date</th>
<th>To Date</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="mp in MaintenanceZones">
<td></td>
<td>{{mp.MP_NAME}}</td>
<td>{{mp.MP_CODE}}</td>
<td>{{mp.REMARK}}</td>
<td>{{mp.VENDORNAME}}</td>
<td>{{mp.VENDORCODE}}</td>
<td>{{mp.VFRDATE}}</td>
<td>{{mp.VTODATE}}</td>
</tr>
</tbody>
</table>
Please help

Try this
$('#assignVender').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
function AssignVendor() {
var table = $(assignVendor).DataTable();
var data = table.rows('.selected').data();
}
Reference: https://datatables.net/examples/api/select_row.html
To Loop through the data use the following:
data = table.rows('.selected').data();
data.each( function ( value, index ) {
console.log( 'Data in index: '+index+' is: '+value );
} );

Getting TH value in jquery

I am trying to get header text in array, however with following I am getting value plus th tag i.e [<th>value1</th>, <th>value2</th>], I want to get [value1, value2].
$('#header').children().each(function(){this.html});
Here is how my HTML looks like:
<tr bgcolor="#cdb79e" id="header">
<th>Origin Code</th>
<th>Description</th>
<th>Notes</th>
<th>Domain</th>
<th>Tier</th>
<th>Engine</th>
<th>Network</th>
<th>Platform</th>
<th>Expansion Tool</th>
<th>Date</th>
<th>Imps</th>
<th>Clicks</th>
<th>Engine CTR</th>
<th>Average Position</th>
<th>Picks</th>
<th>LP CTR</th>
<th>GSL Picks</th>
<th>GSL LP CTR</th>
<th>Merchant Picks</th>
<th>Merchant LP CTR</th>
<th>CPC</th>
<th>RPC</th>
<th>RPP</th>
<th>Cost</th>
<th>Total Rev</th>
<th>Margin</th>
<th>ROI</th>
</tr>

Assuming your HTML were to look something like this:
<table>
<thead>
<tr id='header'>
<th>Value1</th>
<th>Value2</th>
</tr>
</thead>
</table>
You could use something like this to build an array of the <th> elements' text:
var headerArray = [];
$('#header').children().each(function(){
headerArray.push($(this).text());
});
console.log(headerArray);

Automatically filling out a form when clicking a table row with javascript/jquery

I have a dynamically generated table that looks like this
<table width="100%">
<tr>
<th>Client ID</th>
<th>Shortname</th>
<th>Client Name</th>
<th>Client Name 2</th>
</tr>
#foreach($clients as $client)
<tr>
<td>{{$client->customer_id}}</td>
<td>{{$client->shortname}}</td>
<td>{{$client->customer}}</td>
<td>{{$client->customer_row2}}</td>
</tr>
#endforeach
I would like to be able to click on a row, and automatically populate a form with the information in the table row.
I have thought of a solution that i think should work, but I haven't really got the JS skills to write the code.
This is what im thinking:
{{$row=1}}
<table width="100%">
<tr>
<th>Client ID</th>
<th>Shortname</th>
<th>Client Name</th>
<th>Client Name 2</th>
</tr>
#foreach($clients as $client)
<tr id="row{{$num}}">
<td class="clientId">{{$client->customer_id}}</td>
<td class="shortname">{{$client->shortname}}</td>
<td class="client">{{$client->customer}}</td>
<td class="clientRow2">{{$client->customer_row2}}</td>
</tr>
{{$row++}}
#endforeach
And here's some psuedo code to help you understand what im thinking:
onclick getElementById(.this)
input element with id clientId .put(this.#clientId)
input element with id shortname .put(this.#shortname)
input element with id client .put(this.#client)
input element with id clientRow2 .put(this.#clientRow2)
I hope that everybody understands what i'm trying to accomplish, and that someone is willing to help
Regards Johan

I ended up doing this:
<tr onclick="var td = $(this).find('td');
var row1 = td.eq(0).html();
var row2 = td.eq(1).html();
var row3 = td.eq(2).html();
var row4 = td.eq(3).html();
$('.input1').val(row1);
$('.input2').val(row2);
$('.input3').val(row3);
$('.input4').val(row4);">
on each table row, not very elegant, but it gets the job done

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([])