Datatable with fullcalendar js

aashishsoni

Hello All,

Hope you are safe and coding ,

I am integrating my datatable with fullcalendar but the draw function is not working when I use $.fn.dataTable.ext.search.push thanks in advance for any little help I am stuck from last 2 days.

My code to render datatable.

var table = $('#allschedulelist').DataTable({

        "data":JSON.parse(sjsongrid),
        "columns": [
            { "data": "name" },
            { "data": "marina"},
            { "data": "slip"},
            { "data": "vessel_name"},
            { "data": "vessel_length"},
            {
            "render": function(data, type, full, meta){
                var $select = $('<select/>', { 'class': 'ctrl-status', 'onchange':'adddiver(this.value,'+full['id']+');' });
                var diverarray = JSON.parse(jsondiver);
                var $bla = $('<option/>', { 'value': '', 'text':  ''});
                $select.append($bla);
                $.each(diverarray, function (Value, Text) {

                   var $opt = $('<option/>', { 'value': Text.Value, 'text': Text.Text });
                     if (Text.Value === full['diverid']){
                          $opt.attr("selected", "selected");
                       }
                   $select.append($opt);
                });
                return $select.prop("outerHTML");
             }
            },
            { "data": "schedule_date"},
        ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            console.log(nRow);
            $(nRow).attr("id",'trschedulelist_' + aData['id']);
            switch(aData['diverid']){
                case null:
                    $(nRow).css('background-color', '#dacfcf');
                    //$('tr', nRow).prop('id','trschedulelist_{{jobsinfo.id}}');
                    break;
            }
        }

    });

Code for full calendar start date and end date search.

 $( ".fc-next-button" ).click(function() {
        $('#allschedulelist').DataTable().destroy();


        var view = $('#calendarforsch').fullCalendar('getView');
        var mystartdate = view.intervalStart.format('YYYY-MM-DD');
        var myenddate = view.intervalEnd.format('YYYY-MM-DD');

        $.fn.dataTable.ext.search.push(
          function(settings, data, dataIndex) {
            if ( settings.nTable.id !== 'allschedulelist' ) {
                return true;
            }
            var min = mystartdate;
            var max = myenddate;
            var createdAt = data[6] || 0; // Our date column in the table
            if (
              (min == "" || max == "") ||
              (moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
            ) {
              return true;
            }
            return false;
          }
        );
        var table = customdt(jsongrid);
        table.draw();

    });

kthorngren

I am integrating my datatable with fullcalendar but the draw function is not working when I use $.fn.dataTable.ext.search.push

What exactly is not working?

The best thing you can do is provide a link to your page or a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin