Custom Search Builder seems to be unsupported in IE 10,11 & Edge but working like charm in chrome

sharepoint2013 · September 2020

Link to test case:
Debugger code (debug.datatables.net):
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Qlfrtip'
});
});

Error messages shown: Not showing any error message
Description of problem: Custom Search Builder seems to be unsupported in IE 10,11 & Edge but working like charm in chrome. While using IE we are not able to select condition and value.Can we have a solution on this?

APursch · September 2020

Working in Edge here, perhaps a little slow; but not in Firefox!
Also using Custom Search Builder takes out the page length input dropdown, although I see not the case with you sharepoint2013 :-(

APursch · September 2020

Ah! Found the page length problem: I had 'Qrftip' having missed the ' l ' out. Doh!

sharepoint2013 · September 2020

any other solution available for Custom Search Builder without dom: 'Qlfrtip' option

sandy · September 2020

Hi @sharepoint2013 ,

We actually pushed a fix for this the other day, IE11 doesn't support everything that the javascript was using so we had to change some stuff around. If you use the code from the nightly builds then you should find that it is working.

Thanks,
Sandy

sharepoint2013 · September 2020

Hi Sandy
Thank you so much for providing the fix. It seems like 'After''Before','Between' and 'Not Between' condition are missing for a Date column if selected.
Do you have any recommendation on this please?

sandy · September 2020

Hi @sharepoint2013 ,

It looks as though the type of that column is either a string, or SearchBuilder is defaulting to a string. This will happen if your date is not in ISO-8601 format, if that is the case then you will need to include moment (as is happening in this example).

If that doesn't work I'll need a test case please. 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

sharepoint2013 · September 2020

Thank you for your suggestion. I am looking in to it.
1 quick question: How can i add export to excel or csv button along with custom search builder functionality.
I am having requirement to show Export to Excel or CSV Button just under this Search Builder functionality.
Appreciate your help on this and eagerly waiting for your valuable feedback.

sandy · September 2020

Hi @sharepoint2013 ,

You can customise the layout of DataTables using the dom option. Something along the lines of QBlfrtip should do that for you.

Thanks,
Sandy

sharepoint2013 · September 2020

Hi Sandy
Can you please provide an example. I am not able to use excel button along with dom: 'Qlfrtip',

option tried1

var table = $('#myTable').DataTable();

new $.fn.dataTable.Buttons( table, {
buttons: [
'copy', 'excel', 'pdf'
]
} );

option 2
dom: 'Qlfrtip',
buttons: [
'pageLength',
{ extend: 'csv', text: ' Export as CSV' },
{ extend: 'excel', text: ' Export as EXCEL' },
{ extend: 'print', text: 'PRINT' }

],

Nothing worked for me.

kthorngren · September 2020

Did you try adding the B to the dom option like Sandy suggested?

Kevin

sandy · September 2020

Hi @sharepoint2013 ,

With the dom value you have listed there it won't insert the buttons anywhere. You need the B as I listed above. Change Qlfrtip to QBlfrtip and it should work for you.

Thanks,
Sandy

sharepoint2013 · September 2020

That worked Thank you so much.
Another problem is that I am having Date field loaded to datatable which I was able to filter in custom search builder. Is there any provision I can format the date to 'mm\dd\yyyy' format.
If I try to format using below code I am unable to use the field as date column to filter in custom search builder. Please help me.
code1
render: function (data, type, row) {
return (data == null) ? "" : moment(data).format("MM/DD/YYYY");
}

code 2(the below code also not working for me)
$.fn.dataTable.moment('ddd, MMMM Do, YYYY');

colin · September 2020

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

sharepoint2013 · September 2020

Hello Colin
I have created a test case with url below.
http://live.datatables.net/donayaho/2/edit

I am unable to replicate search builder button along with Print,EXCEL and CSV in this test case but I am able to achieve the same in my original code.Not sure how to do that here.

I am getting data from SharePoint with date format '2020-09-21T05:00:00Z' and needs to format accordingly to 'MM/DD/YYYY'. The problem here is when i try to format using render option I am not able to filter date as per the previous screenshot.

Sample code:
$(document).ready(function () {
$.fn.dataTable.moment('ddd, MMMM Do, YYYY');

$("#table_OtherReport_id").hide();
$('#SelectReportDropdown').change(function () {

    if ($(this).val() == "New Report") {
        $("#table_NewReport_id").show();
        if ($.fn.DataTable.isDataTable('#table_OtherReport_id')) {
            $("#Other_RebateReport_id").hide();
            var rebateTable = $('#table_OtherReport_id').dataTable();
            rebateTable.fnDestroy();
        }

        ReportItems();
    }
});

});

function ReportSuccHandler(data) {
try {
$.fn.dataTable.moment('dddd, MMMM Do, YYYY');
$('#table_Report_id').DataTable({
"columnDefs": [
{ "type": "date", "targets": 4 }
],
searchBuilder: {
columns: [1, 4]
},
dom: 'QBlfrtip',
buttons: [
{ extend: 'csv', text: ' Export as CSV' },
{ extend: 'excel', text: ' Export as EXCEL' },
{ extend: 'print', text: 'PRINT' }

],

"aaData": data.d.results,
"aoColumns": [
{
    "mData": "Name"
},
{
    "mData": "Position",
    "defaultContent": ""
},
{
    "mData": "Office"
},
{
    "mData": "Age"
},
{
    "mData": "Start_x0020_Date",
    "defaultContent": "",
    render: function (data, type, row) {
        return (data == null) ? "" : moment(data).format("MM/DD/YYYY");
    }
},
]

});
} catch (e) {
alert(e.message);
}
}

sandy · September 2020

Sorry @sharepoint2013 ,

The test case that you provided does not include the code that you have mentioned above. In fact, SearchBuilder was not even loading because of your setup.

Can you please edit it so that we can actually replicate the problem that you are having? Otherwise it's impossible for us to fully understand what is going wrong.

Thanks,
Sandy

sharepoint2013 · September 2020

I have made necessary changes to the code and issue has been resolved.
Thank you so much for all the help and support from everyone.

{
"mData": "Completion_x0020_Date",
"defaultContent": "",
render: function (data, type, row) {
// Only show the formatted date when type=display otherwise for custom search builder filter date is interpreted as string
if (type === 'display') {
return (data == null) ? "" : moment(data).format("MM/DD/YYYY");
}
return data;
}
}

sharepoint2013 · September 2020

I am facing issue on Custom Search Builder
I am manipulating 5 datatables with loading a datatable after destroying other datatables.
I added Custom Search Builder to all datatables, Once 2nd Datatable selected and revisited 1st datatable I am getting error like below screenshot. Please help

sharepoint2013 · September 2020

Sample code for selecting 1st datatable

if ($(this).val() == "Audit Report") {
            $("#table_AuditReport_id").show();
            if ($.fn.DataTable.isDataTable('#table_AuditReport_id')) {
                $("#table_AuditReport_id").hide();
                var auditTable = $('#table_AuditReport_id').dataTable();
                auditTable.fnDestroy();
            }
            if ($.fn.DataTable.isDataTable('#table_RebateReport_id')) {
                $("#table_RebateReport_id").hide();
                var rebateTable = $('#table_RebateReport_id').dataTable();
                rebateTable.fnDestroy();
            }
            if ($.fn.DataTable.isDataTable('#table_InquiryReport_id')) {
                $("#table_InquiryReport_id").hide();
                var inquiryTable = $('#table_InquiryReport_id').dataTable();
                inquiryTable.fnDestroy();
            }
            if ($.fn.DataTable.isDataTable('#table_RecoveryReport_id')) {
                $("#table_RecoveryReport_id").hide();
                var recoveryTable = $('#table_RecoveryReport_id').dataTable();
                recoveryTable.fnDestroy();
            }
            if ($.fn.DataTable.isDataTable('#table_CollaborativeReport_id')) {
                $("#table_CollaborativeReport_id").hide();
                var collaboratveTable = $('#table_CollaborativeReport_id').dataTable();
                collaboratveTable.fnDestroy();
            }
            AuditItems();

sharepoint2013 · September 2020

$('#table_RebateReport_id').DataTable({
            stateSave: false,
            "columnDefs": [
                { "type": "date", "targets": [7,8] }
            ],
            searchBuilder: {
                columns: [3,5,7,8,9]
            },
            dom: 'QBlfrtip',
            buttons: [
                { extend: 'csv', text: '<i class="fas fa-file-csv fa-1x"> Export as CSV</i>' },
                { extend: 'excel', text: '<i class="fas fa-file-excel" aria-hidden="true"> Export as EXCEL</i>' },
                { extend: 'print', text: '<i class="fas fa-file-excel" aria-hidden="true">PRINT</i>' }

            ],
});

sandy · September 2020

Hi @sharepoint2013 ,

SearchBuilder takes the table headers to populate that select element, although it shouldn't be displaying that.

Could you please link to a test case showing the issue so that I can see exactly what is going wrong? 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

sharepoint2013 · September 2020

I am unable to recreate testcase for my issue.

Let me generalize the issue.
1. If I select datatable1 , i can simple use search builder with necessary condition.
2. If I select datatable2, datatable 2 loads and i have written code to destroy datatable1. Here I can use search builder with necessary condition for datatable2 .
3. Reselect datatable1, Here comes the issue, I am getting error in search builder for condition
Please find previous screenshot for more details.
Appreciate your help on this. Looking on this issue for quite long time without any success.

sandy · September 2020

Hi @sharepoint2013 ,

Without a test case I'm afraid all that I can really do is suggest that you use the nightly builds, which should have all of the latest fixes. If that doesn't help I'm not sure what more we can do without a test case.

Thanks,
Sandy

sharepoint2013 · October 2020

Custom search builder not showing 'Invoice Number' values for 'equal' condition as some of the value contains null values. Any idea on how to resolve this?
Please find screenshot for more details.

LimpEmu · October 2020

I had this problem. It looks like searchBuilder does not like if the display result is null. Make sure that you render the column with '' rather than null, and it will work. Rough example:

render:function(data,type,row) {
  if (type == "display" && (data === null || data === undefined || data.length === 0)) return '';
  else return data;
}

colin · October 2020

As Sandy, said we need to see a test case. 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. We can't debug a screenshot.

Cheers,

Colin

sharepoint2013 · October 2020

That worked. Thankyou so much @LimpEmu.

sharepoint2013 · October 2020

Please please help on this.
Custom search builder not checking conditions like 'NOT','EQUALS' for Payment Due Date column. I am showing 'MM/DD/YYYY' format for Payment Due Date in display using render function.

Any idea on how to resolve this?

{

            "mData": "Payment_x0020_Due_x0020_Date_x00",
            "defaultContent": "",
            render: function (data, type, row) {
                // If display show the formatted date otherwise for custom search builder filter date is interpreted as string
                if (type === 'display') {
                    return (data == null) ? "" : moment(data).format("MM/DD/YYYY");
                }
                return data;
            }
        },

Please find screenshot for more details.

colin · October 2020

As I mentioned before, please provide a test case. It's hard to debug a screenshot.

Colin

sharepoint2013 · October 2020

I tried to recreate the same in test case but I am not able to achieve the same.
I have added necessary library etc but i am not able to create custom build search in test case. I am unable to do so like in url https://datatables.net/extensions/searchbuilder/examples/initialisation/renderedCells

any recommendation or any suggestion will be prettymuch helpful for me.

Custom Search Builder seems to be unsupported in IE 10,11 & Edge but working like charm in chrome

Custom Search Builder seems to be unsupported in IE 10,11 & Edge but working like charm in chrome

Answers

Howdy, Stranger!

Categories

DataTables

Custom Search Builder seems to be unsupported in IE 10,11 & Edge but working like charm in chrome

Custom Search Builder seems to be unsupported in IE 10,11 & Edge but working like charm in chrome

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables