Date Picker Error

Mikki_M

Hi all I am having an issue with the below js file. The way it is supposed to work, is that on page load a datatable will be created based on a json file (formed from a mysql query). This table is also has the copy/excel/pdf/colvis buttons available.

At this point the solution works. The system breaks when I attempted to include a date picker and this is where I get lost. When the script is called i get "Uncaught SyntaxError: Unexpected string (at datatables.init.js:49:7)" which the line with

$('#min, #max').on('change', function () {table.draw();

Can anyone tell me what I am doing wrong?

var minDate, maxDate;
 
// Custom filtering function which will search data in column four between two values
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        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;
    }
);

  $(document).ready(function() {
      
      // Create date inputs
    minDate = new DateTime($('#min'), {
        format: 'MMMM Do YYYY'
    });
    maxDate = new DateTime($('#max'), {
        format: 'MMMM Do YYYY'
    });
            var table =      $('#uploaded').DataTable({
                            "bProcessing": true,
                            "sAjaxSource": "layouts/uploaded.php",
                            "aoColumns": [
                                    { mData: 'PresetNumber' } , 
                                    { mData: 'Dates' } , 
                                    { mData: 'Starts' } , 
                                    { mData: 'Stops' } , 
                                    { mData: 'ProductCode' } , 
                                    { mData: 'ProductName' } 
                                                            ],
                                lengthChange: false,
                                buttons: ['copy', 'excel', 'pdf', 'colvis'],
                                initComplete: function() {
                                table.buttons().container()
                                    .appendTo('#uploaded_wrapper .col-md-6:eq(0)');
                                    $(".dataTables_length select").addClass('form-select form-select-sm');},
                                 // Refilter the table
                                $('#min, #max').on('change', function () {table.draw();
                                });
                                            }); 
                                            });

allan

Indeed you do have a syntax error there.

Reformatting the code to be a bit more readable you can see:

    var table = $('#uploaded').DataTable({
        "bProcessing": true,
        "sAjaxSource": "layouts/uploaded.php",
        "aoColumns": [{
                mData: 'PresetNumber'
            },
            {
                mData: 'Dates'
            },
            {
                mData: 'Starts'
            },
            {
                mData: 'Stops'
            },
            {
                mData: 'ProductCode'
            },
            {
                mData: 'ProductName'
            }
        ],
        lengthChange: false,
        buttons: ['copy', 'excel', 'pdf', 'colvis'],
        initComplete: function() {
            table.buttons().container()
                .appendTo('#uploaded_wrapper .col-md-6:eq(0)');
            $(".dataTables_length select").addClass('form-select form-select-sm');
        },
        // Refilter the table
        $('#min, #max').on('change', function() {
            table.draw();
        });
    });

Specifically you need to move the // Refilter the table part outside of the DataTables initialisationn object.

You might want to try using something like Prettier or a linter to catch such errors.

Allan

Mikki_M

Hi Allan, thanks very much for the feedback, it works now!