Footer search on server side table
Footer search on server side table
harshithg
Posts: 3Questions: 2Answers: 0
Hi,
I am using the following code for server side implementation. The code pushes the data perfectly along with footer search option, however the footer filtration doesnt work at all. Any guidance would be helpful:
<script>
$(document).ready(function () {
$('#serverside_table').DataTable({
bProcessing: true,
bServerSide: true,
sPaginationType: "full_numbers",
lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
bjQueryUI: true,
dom: 'Blfrtip',
buttons: [
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
{ extend: 'excel', title: '' },
{ extend: 'csv', title: '' },
{ extend: 'pdf', title: '' },
'print'
]
}
],
sAjaxSource: '/exposure_data/view_data',
columns: [
{ "data": "Upload Date" },
{ "data": "Instrument ID" },
{ "data": "Product Group" },
{ "data": "Product Code" },
{ "data": "Category" },
{ "data": "Currency Code" },
{ "data": "Counterparty ID" },
{ "data": "Maturity Date" },
{ "data": "Al Position" },
{ "data": "Cashflow Computed Flag" },
{ "data": "Agreed Interest" },
{ "data": "Reference Rate" },
{ "data": "Interest Spread" },
{ "data": "Purpose" },
{ "data": "Outstanding" },
{ "data": "Flag Revolving" },
{ "data": "Frequency" },
{ "data": "Limit Amount" },
{ "data": "Notional Amount" },
{ "data": "Day Count Convention" },
{ "data": "Remaining Period" },
{ "data": "Deliquency Days" },
{ "data": "Billing Account" },
{ "data": "Unutilised Commitment Amount" },
{ "data": "Repayment Day" },
{ "data": "Start Date" },
{ "data": "Facility" },
{ "data": "FRR" },
{ "data": "Employer Code" },
{ "data": "Guarantor ID" },
{ "data": "Payment Method" },
{ "data": "Data Date" },
{ "data": "Import Source" },
{ "data": "Portfolio CD" },
{ "data": "Acrrued Interest" },
{ "data": "Interest Debited" },
{ "data": "Fee Due" },
{ "data": "Unamortised Fee Balanace" },
{ "data": "Fair Value" },
{ "data": "Initial Impairement" },
{ "data": "Fees At Origination" },
{ "data": "Principal Pastdue" },
{ "data": "Collateral Pool" },
{ "data": "Account Status" },
{ "data": "Link Commitment Loan" },
{ "data": "Principal Undue" },
{ "data": "Initial Interest" },
{ "data": "POCI Contract" },
{ "data": "FVA" },
{ "data": "SPPI FA" },
{ "data": "BM FA" },
{ "data": "Equity Classification" },
{ "data": "FA Classification" }
]
});
});
// add search boxes to footer
$('#serverside_table tfoot th').each(function () {
var title = $(this).text();
$(this).html("<input type='search' placeholder='" + title + "' />");
});
//And here i get stuck processing ... and data not come
table.columns().every(function () {
var dataTableColumn = this;
$(this.footer()).find('input').on('keyup change', function () {
dataTableColumn.search(this.value).draw();
});
});
</script>
This discussion has been closed.
Answers
You don't have a "table" variable defined.
Try
where you initialise your DataTable.
Also make sure you have a tfoot in your HTML.
If @tangerine's suggestion doesn't work, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Thanks both for your feedback. I was able to correct parts of it, however, the filter shows processing but doesn't provide the filtered output. I was able to pinpoint it to bserverSide, if i remove this everything works fine.
I have serverside implemented on my localhost, let me see if i can migrate it somewhere to check:
The most likely cause of that will be your script isn't complying with the server side processing protocol - it's discussed here.
Cheers,
Colin