While loading page i get Uncaught TypeError: reportTable.column(...).search(...).column is not a fun

istudent_learning

my code is below.

$('#ReportDetailsDiv').ready(function () {
        itemType = $('#selectedItemType').data('itemtype');
        projType = $('#selectedStoreType').data('storetype');
        month = $('#selectedMonth').data('month')
        year = $('#selectedYear').data('year');


        GetReportDetailsData(token, itemType, projType, month, year);

    })



    $('#btnReportFilter').on('click', function (e) {
        event.preventDefault();
        itemType = $('#selectedItemType').data('itemtype');
        projType = $('#selectedStoreType').data('storetype');
        month = $('#selectedMonth').data('month')
        year = $('#selectedYear').data('year');

        var colStore = $('#searchOpenItemByStoreId').attr('data-column');
        var colItem = $('#searchOpenItemByItemId').attr('data-column');

        var valStore = $('#searchOpenItemByStoreId').val().toLowerCase();
        var valItem = $('#searchOpenItemByItemId').val().toLowerCase();

        GetReportDetailsData(token, itemType, projType, month, year, colStore, valStore, colItem, valItem);

    })


    var GetReportDetailsData = function (token, itemType, projType, month, year, colStore, valStore, colItem, valItem) {

      
        $.fn.dataTable.ext.errMode = 'none';

        var ReportDetailsDivToUpdate = $('#ReportDetailsDiv');

        ReportDetailsDivToUpdate.html("");

        var table = '';
        table += '<table id="reportTable" class="table table-condensed table-bordered table-responsive table-hover dash-card-table" style="font-size:10px;">';
        table += '<thead style="font-size:10px; background-color:#495c89; color:#fff">';
        table += '<tr>';
        table += '<td>Fixture</td>';
        table += '<td>Store</td>';
        table += '<td>City</td>';
        table += '<td>State</td>';
        table += '<td>Project</td>';
        table += '<td>Coordinator</td>';
        table += '<td>Item Type</td>';
        table += '<td>Item</td>';
        table += '<td>Request Date</td>';
        table += '</tr>';
        table += '</thead>';
        table += '</table>';

        ReportDetailsDivToUpdate.html(table);


        //server side

        var reportTable = $('#reportTable').DataTable({
            "ajax": {
                url: "/myproject/Dashboard/Reports",
                headers: { "__requestverificationtoken": token },
                type: "POST",
                data: {
                    "itemType": itemType,
                    "projectType": projType,
                    "month": month,
                    "year": year
                },
                datatype: "json"
            },
            "columns": [
                    { "data": "Fixture", "name": "Fixture", "autoWidth": true, "searchable": false, },
                    { "data": "Store", "name": "Store", "autoWidth": true },
                    { "data": "City", "name": "City", "autoWidth": true, "searchable": false, },
                    { "data": "State", "name": "State", "autoWidth": true, "searchable": false, },
                    { "data": "ProjectType", "name": "ProjectType", "autoWidth": true, "searchable": false, },
                    { "data": "Coordinator", "name": "Coordinator", "autoWidth": true, "searchable": false, },
                    { "data": "ItemType", "name": "ItemType", "autoWidth": true },
                    { "data": "Item", "name": "Item", "autoWidth": true, "searchable": false, },
                    { "data": "RequestedDate", "name": "RequestedDate", "autoWidth": true, "searchable": false, }

            ],
            lengthMenu: [[200, 500, 1000], [200, 500, 1000]],
            responsive: true,
            order: [0, "asc"],
            paging: true,
            fixedHeader: true,
            autoWidth: false,
            responsive: true,
            serverSide: true,
            dom: "<'row'<'col-sm-6'l><'col-sm-3'i><'col-sm-3'p>>" +
                 "<'row'<'col-sm-12'tr>>"
        });


        $("select[name='myTable_length']").addClass('selectShowEntries');


        reportTable.column(colItem).search(valItem).column(colStore).search(valStore).draw();


    }

kthorngren

The problem is you are trying to chain your searches but the column().search() doesn't return an API but it returns the search term. You will need two lines of code:

reportTable.column(colItem).search(valItem);
reportTable.column(colStore).search(valStore).draw();

Kevin