How to pass parameter to datatable from daterangepicker?

TomHall

I have modified my code to have a function called - dTable(myType) that I pass a parameter to. The parameter is for the type of table I wish to display, either with phone calls or form submissions.

Everything works as it should except the daterangepicker. When I change dates the page goes blank. I guess because my function is expecting a parameter and not getting one.

I see in the code daterangepicker executes cb (which as dTable(myType)) but I don't see where I can add my parameters.

https://1stautorepair.com/leads/

$(document).ready(function () {

var lType = $("#lead_type option:selected").val();


$(function() {

    var start = moment().subtract(59, 'days');
    var end = moment();
    var myType;

    function cb(start, end, myType) {
        
        $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        var leadURL = "/includes/leadTable.asp?s=" + start.format('YYYY-MM-D') + "&e=" + end.format('YYYY-MM-D') + "&type=" + myType;
        
        $("#leadTable").fadeOut(1000);
        
        $('#leadTable').load(leadURL, function () {
            dTable(myType);
            mBind(); 
            bindME(); 
            $( "#callsTable_filter input" ).focusout(function(){bindME();});
        }).fadeIn("slow")
    }

    $('#leadTable').on( 'length.dt', function ( e, settings, len ) {
    setTimeout(bindME,2000);
    });

    $('#leadTable').on( 'page.dt', function () {
    setTimeout(bindME,1000);}
    );

    $('#leadTable').on( 'column-visibility.dt', function ( e, settings, column, state ) {
        bindME();
    });    


    $('#dateRange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end, lType);

    $('select#lead_type').on('change', function () {        
        cb(start, end, $(this).children("option:selected").val());
    });


});
});






function bindME(){

            document.querySelectorAll('.leadAMT').forEach(
                function(obj){
                    new Cleave(obj,{
                    numeral: true,
                    numeralThousandGroupStyle: 'thousand'
                });
            });

            $(".leadAMT").click(function(){            
                if($(this).val() == 0){
                    $(this).val('');
                }
            });
            $(".leadAMT").blur(function(){
               if($(this).val() == ''){
                    $(this).val('0');
                }
            });

            $(".leadSubmit").click(function(){
                var leadID = $(this).attr("data-id");

                $.post("https://www.1stautorepair.com/includes/lead-estimate-update.asp",
                {
                ro: $("#ro"+$(this).attr("data-id")).val(),
                invoice: $("#invoice"+$(this).attr("data-id")).val(),
                amount: $("#amt"+$(this).attr("data-id")).val(),                
                leadID: $(this).attr("data-id")
                },
                function(data,status){
                console.log("Data: " + data + "\nStatus: " + status)
                $("#ro"+leadID).css('border', '2px solid green');
                $("#amt"+leadID).css('border', '2px solid green');
                $("#invoice"+leadID).css('border', '2px solid green');

                });
            });

}

rf1234

I must admit that I don't understand your code at all. And I am not sure whether I can help with that.

I also have the situation that my clients can dynamically change the date range they want to see. If your data table isn't a "serverSide: true" data table you can use
$.fn.dataTable.ext.search.push
to filter the rows accordingly. https://datatables.net/manual/plug-ins/search#Example

This should work:

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex, row, counter ) {
        if ( typeof row.date !== 'undefined' ) {
            if ( row.date fits in date range ) {
               return true;
            }
            return false;
        }
        return true;
    }                
);

The code needs to be executed before DT initialization. It will be executed for all Data Tables on your page! If you want to avoid that check whether or not unique row.fields are defined or not.

TomHall

Thanks for your assistance, much appreciated. To be honest, I have a hard time understanding the code. I am trying to see the connection between changing the date(s) and the table being redrawn.

When the page loads, I call this function:

cb(start, end, lType);

In this code:

    $('#dateRange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

I see what I think is a call to "cb", but no parameters at all. That is what confuses me.

rf1234

ok, all you would need to do is to grab the selected value from the daterangepicker and compare it with the dates of your data table as in my "pseudo code" above. And there is only one line which is "pseudo" ... The rest should work fine ...

if ( row.date fits in date range ) {

rf1234

I found pretty much the exact same code that you posted here:

"Predefined Date Ranges":
https://www.daterangepicker.com/#example4

Scroll down in the little window and you'll see it.

<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
    <i class="fa fa-calendar"></i>&nbsp;
    <span></span> <i class="fa fa-caret-down"></i>
</div>

<script type="text/javascript">
$(function() {

    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end);

});
</script>

You also see function cb ..."compare by" ...

How do you get this into Data Tables? Well, use $.fn.dataTable.ext.search.push as above.

TomHall

Again, thanks. is the code / examples you are giving me related to the search box? I am having a problem with the daterangepicker

Also, the "serverside" issue is new to me. I use an ajax call that includes a page that is populated server side.

rf1234

is the code / examples you are giving me related to the search box?

Yes and no. Yes, you can use it with that as well using the second parameter which I have never done so far. Or you can use it the way I suggested using the 4th parameter "row" which gives you the content of your dt rows which you can compare with the date ranges. Think of $.fn.dataTable.ext.search.push as a configurable, very flexible filter.

A serverSide dt doesn't mean you may not populate the data table with an ajax call.All of my data tables are populated like this. It only means that the searching, filtering etc. is done server side as opposed to client side.

If you do searching, filtering etc client side (which is the default in Data Tables) then my code will work. If you do it server side you will need to pass the daterangepicker values to the server and do it using a dynamic where clause. I've done both. Client side is easier.

rf1234

For the sake of completeness here is an example of such a "dynamic where clause". I use the same data table client and server side on different pages. Since I can't use $.fn.dataTable.ext.search.push for server side I send a variable to the server in those cases. Based on that a specific filtering where clause is added to the server Editor instance:

->where( function ( $q ) {
    ......
    if ( isset($_POST['startDateExpired']) ) {
        $q  ->where( function ( $r ) { 
            $r  ->where( 'ctr.expired', 0 )
                ->or_where( function ( $s ) { 
                    $s  ->where( 'ctr.expired', 1 )
                        ->where( 'ctr.end_date', $_POST['startDateExpired'] . ' 00:00:00', '>='); 
                } );
        } );
    }
} )