Customize SearchPanes
Customize SearchPanes
ferpalma21
Posts: 11Questions: 3Answers: 0
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I have a really customized table where inside each cell there is a bunch of HTML, like IMGS, links and so on... Plus a lot logic in the render of each column. When I import searchpanes.js to create filters it shows all the html inside looking horrible and besides this it is not working. Is there anyway that the searchPanes only renders the desired columns and the actual data, instead of all the HTML.
I am using an ajax call to bring al the data. So I'm also putting a small example of this data.
Below you can find the code:
let w;
var table = $('#example').DataTable({
ajax: {
type: 'GET',
url: '/url/',
dataSrc: (data) => {
w = data.value
let prs = [
{
"_id": "357640001rp61b",
"type_of_investment": "real_estate",
"status": "open",
"name": "Dzirnavu Street III",
"irr": 16,
"currency": "EUR",
"target": 400000,
"ini": 1600819200000,
"end": 1632441599999,
"amount_available": 118.31,
"buy_back_guarantee": false,
"collateral": false,
"ltv": "35",
"isCrowdlending": true,
"pmts": 1,
"monthsPerPeriod": 12,
"minimum": 10,
"platform_id": "19091917070001hgl1",
"risk_type": "bb",
"country": "LV",
"disinvestment": 365,
"logo": "B20191001T000000007",
"invested": 0,
"pending": 0
},
]
return prs;
}
},
responsive: true,
columnDefs: [
{
targets: 0,
orderable: false,
width: '1%',
className: 'control'
},
{
responsivePriority: 1,
targets: 1,
width: "5%",
render: function ( data, type, row, meta ) {
let render = `
<div class="max-first-cell">
<img class="flag mgr-0-5x" style="max-width:50px;max-height:15px;" data-country="${row.country}" src="/images/flags/${row.country.toLowerCase()}.png" alt="Flag @{row.country}">
<div class="lead mgb-0-5x sm-font-size text-truncate" style="max-width: 10ch"><a href="/projects/${row._id}">${row._id}</a></div>
<div class="sub text-truncate sm-font-size" style="max-width: 10ch">${row.name}</div>
</div>
`;
return render;
},
},
{
responsivePriority: 10,
targets: 2,
className: 'text-center',
render: function ( data, type, row, meta ) {
$(row).attr('cssProject', projectStatusCSS(row.status));
var render = `<div class="text-primary xs-font-size">`
if (row.type_of_investment === 'real_estate') render += `<em class="fa fa-building"></em>`;
else if (row.type_of_investment === 'business_loan') render += `<em class="fa fa-briefcase"></em>`;
render += `</div>`;
return render;
}
},
{ targets: 3,
responsivePriority: 9,
className: 'text-center',
render: function ( data, type, row, meta ) {
let render = `
<img style="max-width:38px;" src="/loan-originators/${row.logo}/view-image">
<div class="lead" id="${row.platform}">${row.platform.substring(0,10)}`;
if (row.platform.length > 10) render += `...`;
render += `</div>`
render += ` <div class="sub pdt-0-5x">`
if (row.isCrowdlending) render += `CrowdLending`;
else render += `Loan Originator</div>`;
return render
}
},
{ targets: 4,
responsivePriority: 1,
className: 'text-center',
render: function ( data, type, row, meta ) {
return `
<h6 class="card-title text-primary">
${row.irr} %
</h6>
`;
}
},
{ targets: 5,
className: 'text-center',
responsivePriority: 1,
render: function ( data, type, row, meta ) {
let risk = riskTypeCss(row.risk_type);
return `
<div data-risk="${risk}" class="lead sm-font-size">
${row.risk_type.toUpperCase().substring(0,5)}
</div>`;
}
},
{ targets: 6,
responsivePriority: 2,
className: 'text-center',
render: function ( data, type, row, meta ) {
let render = ``;
if (row.buy_back_guarantee) render += `<div class="text-success sm-font-size"><em class="fas fa-shield-alt"></em></div><div class="sub sm-font-size">Buyback</div>`;
else if (row.ltv > 0 && !row.collateral) {
render += `<div class="`
if (row.collateral) render+= `text-success`;
else render += `text-primary"`;
render += `><em class="fa fa-building"></em></div>`;
render += `<div class="sub">${row.ltv}% (ltv)</div>`;
}
return render;
},
},
{ targets: 7,
responsivePriority: 2,
className: 'text-center',
render: function ( data, type, row, meta ) {
let render = `<div class="lead">${doEnd(moment.utc(), row.end)}</div>`;
if (row.isCrowdlending && row.payment_calendar[0].pmtDateEffective==='') render += `<div class="sub text-info pdt-0-5x"><em>loan not yet issued</em></div>`;
else render += `<div class="sub pdt-0-5x">${moment(row.ini).format('YYYY-MM-DD')}</div>`;
return render;
}
},
{ targets: 8,
className: 'text-center',
responsivePriority: 2,
render: function ( data, type, row, meta ) {
let paidInstalments = row.payment_calendar.filter(pmtPeriod => pmtPeriod.pmtDateEffective !== "").length;
let render = ``;
if (row.pmts === 1) render += `<div class="lead">On maturity</div>`;
else render += `<div class="lead">${doTextRepayment(row.monthsPerPeriod)}</div>`;
render += `<div class="sub mgr-1x pdt-0-5x">${paidInstalments} / ${row.pmts}</div>`;
return render;
}
},
{ targets: 9,
className: 'text-center',
responsivePriority: 2,
render: function ( data, type, row, meta ) {
return `
<div id="${row._id}" class="lead">${new Intl.NumberFormat('en-US', {style:'currency', currency: 'EUR'}).format(row.amount_available)}</div>
<div class="sub pdt-0-5x">${new Intl.NumberFormat('en-US', {style:'currency', currency: 'EUR'}).format(row.target)}</div>
`
},
},
],
order: [ [ 0, "asc" ]],
autoWidth: false,
stateSave: false,
searchPanes:{
viewTotal: true,
},
dom:
"P<'row '<'col-12 text-left pdb-3x'i><'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
"<t>" +
"<'row align-items-center'<'col-6 text-left'p>>",
paging: true,
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
pageLength: -1,
language: {
"search": "",
"searchPlaceholder": "Type in to Search",
"lengthMenu": "Show _MENU_ Projects",
"info": "Showing _START_ to _END_ of _TOTAL_ Projects",
"infoEmpty": "Showing 0 to 0 of 0 Projects",
"infoFiltered": "(filtered from _MAX_ total Projects)",
"paginate": {
"first": "First",
"last": "Last",
"next": "Next",
"previous": "Prev"
},
},
});
This discussion has been closed.
Answers
Hi @ferpalma21 ,
Thanks for your question. As noted in the forum rules, please post a link to a running test case showing the issue so we can offer some help. 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.
Thanks,
Sandy
Thanks for your fast reply, I'm trying to replicate it in this codepen https://codepen.io/ferpalma21/pen/LYZmogE nevertheless I wasn't able because I always get the error:
DataTables warning: table id=example - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
And I don't understand why
Slight differences between this implementation and on local. The datatable I'm using locally is requesting the data via ajax, also uses dataSrc.
It's because you haven't defined the
columns.datawithincolumnDefs, so DataTables doesn't know which elements in the "data" object to use. Could you take a look at that, please, and see if the table will load.Colin
Thank you very much @colin just did that and, in fact, the alert error disappeared however the data is not displayed, but the render is returning the correct info.
Could you link to an updated test case, please, so we can take a look.
Colin
Yes it's the same link https://codepen.io/ferpalma21/pen/LYZmogE data is only stated in the first row because for everything else I use render, and data changes depending certain factors
I just tried and it's not running. It needs the Select extension - could you set it up please so we can see the problem occur.
Colin
Thank you very much for your fast response @colin I just added the extention... And well the filtering doesn't work I believe it's due to all the html its in the render. I think if I created extra hidden columns with the information in plain text that will be fixed, but how can I render the search panes only of those columns? So it's just plain text
Thanks
Use Orthogonal data to extract the plain text for the
filterprocess. Something like the Computed Values example except you will use a regex expression to remove the HTML. You can find example regex expressions on Stack Overflow to remove HTML.Kevin
Thank you @colin and @kthorngren you helped me a lot
all working now, I'm still customizing the searchpanes but it works perfect now