struggling to get any filters working beyond the open text search

struggling to get any filters working beyond the open text search

noglasssonoglassso Posts: 2Questions: 1Answers: 0

Link to test case: https://dev.donationpay.org/wp-content/plugins/DonationPay_Internal/datatables_testcase.html
Debugger code (debug.datatables.net): imegas
Error messages shown: None
Description of problem:
Hi there, I'm struggling to get any filters working beyond the open text search on my serverside-generated table. I'd really appreciate any thoughts.

I have a custom function which I was hoping would allow for filtering for a particular date range, and when that didn't work I also installed the custom search builder plugin. Both trigger a redraw of the table, but neither produce filtered results. Thanks in advance for any help you can give me!

Here's my full JS:

jQuery(document).ready(function () {
                    // Create date inputs
                    let minDate = new DateTime(jQuery('#min'), {
                        format: 'MM-DD-YYYY'
                    });
                    let maxDate = new DateTime(jQuery('#max'), {
                        format: 'MM-DD-YYYY'
                    });

                    // DataTables initialisation


                    let dptable = jQuery('#donationpay_datatable').DataTable({
                        "processing": true,
                        "serverSide": true,
                        "searching": true,
                        buttons: ['searchBuilder'],
                        dom: 'Bfrtip',

                        "ajax": {
                            "url": "/wp-content/plugins/DonationPay_Internal/includes/server-side/listpayments.php",
                            "type": "POST",
                            "data": {
                                "clid": "1896"
                            }
                        },

                        "order": [[1, "desc"]],
                        'columns': [
                            {'data': 0, render: jQuery.fn.dataTable.render.number(',', '.', 2, '$')},
                            {'data': 1, 'type': 'date', render: function (data, type, row) {//data
                                    if (type === 'sort') { // ADD this for sorting
                                        return data;
                                    } else {
                                        return moment(data).format("MM-DD-YYYY HH:mm:ss");
                                    }
                                }},
                            {'data': 2},
                            {'data': 3},
                            {'data': 4},
                            {'data': 5}
                        ],

                        success: function (data, textStatus, jqXHR) {
                            console.log(data); //*** returns correct json data
                        }

                    });
                    // Refilter the table
                    jQuery('#min, #max').on('change', function () {
                        console.log('redraw on minmax change.');
                        dptable.draw();
                    });
                });
                jQuery.fn.dataTable.ext.search.push(
                        function (settings, data, dataIndex) {
                            console.log('extender function triggered');
                            var min = minDate.val();
                            var max = maxDate.val();
                            var date = new Date(data[1]);

                            if (
                                    (min === null && max === null) ||
                                    (min === null && date <= max) ||
                                    (min <= date && max === null) ||
                                    (min <= date && date <= max)
                                    ) {
                                return true;
                            }
                            return false;
                        }
                );

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    Search plugins, ie jQuery.fn.dataTable.ext.search.push(..); are used only with client side processing. With server side processing all sorting, searching and paging functions are handled by the server script. You will need to add the date range search capability to you server's data query. This example shows how to pass the values of the inputs to the server.

    Kevin

  • noglasssonoglassso Posts: 2Questions: 1Answers: 0

    Ah, that makes sense! Thank you, I'll work on that.

Sign In or Register to comment.