Date Picker Error

Date Picker Error

Mikki_MMikki_M Posts: 2Questions: 1Answers: 0
edited July 2022 in Free community support

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();
                                });
                                            }); 
                                            });

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Answer ✓

    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_MMikki_M Posts: 2Questions: 1Answers: 0

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

Sign In or Register to comment.