I am not able To Perform searching

Question

I am not using Data table's by Default searching i have implemented my own searching functionality . When First time page loads it working Fine but when i am trying to search it is giving me Error and i am not able to Expand Row's of Data table . **This is My View File **

@model IEnumerable<SoberLivingAmerica.Entities.ResponseModel.CompanyResponseModel.StateWiseCompanyListingModel>

@{
    ViewData["Title"] = "Index";
}

<form>
    <!-- page content start -->
    <div class="pageHead align-items-md-center">
        <div class="pageHeadLeft">
            <h2>Guests</h2>
            <nav class="breadcrumbRow" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="#">Resident Manager</a>
                    </li>
                    <li class="breadcrumb-item"><a href="#">Resident List</a></li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Admit Resident
                    </li>
                </ol>
            </nav>
        </div>
        <div class="pageHeadRight">
            <div class="d-flex align-items-center">
                <button type="button"
                        class="btn button-40 mw-116 btn-info btn-admit d-flex align-items-center mr-16">
                    <span class="d-flex align-items-center mr-2">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             width="14"
                             height="14"
                             viewBox="0 0 14 14">
                            <path fill-rule="evenodd"
                                  d="M7.212 1.496c.238 0 .435.178.463.408l.004.058v4.784h4.783c.258 0 .467.209.467.466 0 .238-.178.435-.408.463l-.059.004H7.68v4.783c0 .258-.209.467-.467.467-.238 0-.434-.178-.463-.408l-.003-.059V7.68H1.962c-.257 0-.466-.209-.466-.467 0-.238.178-.434.408-.463l.058-.003h4.784V1.962c0-.257.209-.466.466-.466z" />
                        </svg>
                    </span>Add City
                </button>
                <button type="button"
                        class="btn button-40 mw-116 btn-info btn-admit d-flex align-items-center">
                    <span class="d-flex align-items-center mr-2">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             width="14"
                             height="14"
                             viewBox="0 0 14 14">
                            <path fill-rule="evenodd"
                                  d="M7.212 1.496c.238 0 .435.178.463.408l.004.058v4.784h4.783c.258 0 .467.209.467.466 0 .238-.178.435-.408.463l-.059.004H7.68v4.783c0 .258-.209.467-.467.467-.238 0-.434-.178-.463-.408l-.003-.059V7.68H1.962c-.257 0-.466-.209-.466-.467 0-.238.178-.434.408-.463l.058-.003h4.784V1.962c0-.257.209-.466.466-.466z" />
                        </svg>
                    </span>Add Region
                </button>
            </div>
        </div>
    </div>
    <div class="filter-row mb-sm-2 align-items-md-center flex-column flex-sm-row">
        <div class="form-group mr-sm-2">
            <div id="reportrange" class="form-control ">
                <img src="~/images/calendar-icon.svg" />&nbsp;
                <span id="span"></span> <i class="fa fa-caret-down"></i>
            </div>
        </div>




        <div class="form-group search mr-sm-2">
            <input type="text"
                   class="form-control"
                   id="searchbystatus"
                   placeholder="Search by status"
                   required="" />
        </div>
        <div class="form-group">
            <button type="button" id="btnSearch"
                    class="btn button-40 mw-110 btn-primary btn-admit">
                Search
            </button>
        </div>
    </div>
    <div class="pageContent">
        <table id="tblExample" class="table mb-0 ">
        </table>
    </div>
</form>
@section Scripts {

    <script>
        var startDate;
        var endDate;
        var status;
        $(document).ready(function () {
            BindData()
        });
                $('#btnSearch').click(function () {

            startDate = $('#reportrange').data('daterangepicker').startDate.format("MM-DD-YYYY");
            endDate = $('#reportrange').data('daterangepicker').endDate.format("MM-DD-YYYY");
            status = $('#searchbystatus').val();
            if ($.fn.DataTable.isDataTable("#tblExample")) {
                $('#tblExample').DataTable().destroy();
            }
            BindData();
        });

        $(function () {

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

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

            $('#reportrange').daterangepicker({
                startDate: start,
                showDropdowns: true,
                endDate: end,
                format: 'mmm-DD-YYYY',
                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);

        });

        function format(d) {
            debugger
            // `d` is the original data object for the row

            if (d == undefined) {
                html = ' <div style="text-align: center;">There is No City in <b>' + d.stateName + '</b> </div > ';
            }
            else if (d.companyRegionList == null)
                html = ' <div style="text-align: center;">There is No City in <b>' + d.stateName + '</b> </div > ';
            else {
                var html = '<div class="table-responsive light-thead border-bottom-0">' +
                    '<table id="htmltable" class="table mb-0">' +
                    '<thead><tr">' +
                    '<th>CITY CODE</th>' +
                    '<th>CITY NAME</th>' +
                    '<th>DIRECTOR</th>' +
                    '<th>CONTACT</th>' +
                    '<th>STATUS</th>' +
                    '</tr></thead><tbody>';

                for (let i in d.companyRegionList.companyList) {

                    html += '<div><tr><td>' + d.companyRegionList.companyList[i].code + '</td>';
                    html += '<td>' + d.companyRegionList.companyList[i].companyName + '</td>';
                    html += '<td>' + d.companyRegionList.companyList[i].companyDirector + '</td>';
                    html += '<td>' + d.companyRegionList.companyList[i].officePhone + '</td>';
                    html += '<td>' + d.companyRegionList.companyList[i].companyStatus + '</td></tr>';
                }
            }

            html += '</tbody</table></div>';

            return html;
        }
       
       
        function BindData() {
            var oTable = $('#tblExample').DataTable({
                scrollY: false,
                //destroy: true,
                ordering: false,
                paging: false,
                searching: false,
                info: false,
                "autoWidth": true,
                "ajax": {
                    "url": "/company/GetData",
                    "type": "Get",
                    "datatype": "json",
                    "dataSrc": "data",
                    "data": {
                        Status: status,
                        startDate: startDate,
                        endDate: endDate
                    }
                },
                columns: [
                    { data: 'id', visible: false },
                    { data: 'stateName' },
                    { data: 'isRegion' },
                    {
                        data: 'regionDirector'

                    },
                    { data: 'phoneNumber' },
                    {
                        data: 'email'

                    },
                    {
                        "className": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": '+'
                    }
                ],
                destroy: true
            });
            $('#tblExample tbody').on('click', 'td.details-control', function () {

                $('#tblExample tbody > tr').addClass('rowInactive');
                debugger
                var tr = $(this).closest('tr');
                var row = oTable.row(tr);
                $(tr).removeClass('rowInactive');

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                    $('#tblExample tbody > tr').removeClass('rowInactive');
                }
                else {
                    // Open this row
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                }
                var tr = $(this).closest('tr');
                var row = oTable.row(tr);

                //if (row.child.isShown()) {
                //    // This row is already open - close it
                //    row.child.hide();
                //    tr.removeClass('shown');
                //}
                //else {
                //    // Open this row
                //    row.child(format(row.data())).show();
                //    tr.addClass('shown');
                //}
            });
        }
           
   
        
    </script>

}

**This are my two Action Method which i have used **

public IActionResult Index()
        {
            return View();
        }
public IActionResult GetData()
        {
            var abc = companyService.getStateWiseCompanyDetail(null, null, null);
            return Json(new { data = abc.Result });
        }

After Entering Values when i am trying to search it Gives me Following Error .

index:326 Uncaught TypeError: Cannot read property 'companyRegionList' of undefined
at format (index:326)
at HTMLTableCellElement.<anonymous> (index:404)
at HTMLTableSectionElement.dispatch (VM47 jquery.min.js:2)
at HTMLTableSectionElement.v.handle (VM47 jquery.min.js:2)

Answer 1

This error indicates that when you click the Search button, the content of current row is not obtained at this time.

To solve it, you need to move the event of clicking td.details-control to $(document).ready(function(){}); method, and make oTable as a public variable.

@section Scripts {
  <script>
    var startDate;
    var endDate;
    var status;
    var oTable;
    $(document).ready(function () {
        BindData();
        $('#tblExample tbody').on('click', 'td.details-control', function () 
         {
            $('#tblExample tbody > tr').addClass('rowInactive');
            debugger
            var tr = $(this).closest('tr');
            var row = oTable.row(tr);
            $(tr).removeClass('rowInactive');

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
                $('#tblExample tbody > tr').removeClass('rowInactive');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
            var tr = $(this).closest('tr');
            var row = oTable.row(tr);

            //if (row.child.isShown()) {
            //    // This row is already open - close it
            //    row.child.hide();
            //    tr.removeClass('shown');
            //}
            //else {
            //    // Open this row
            //    row.child(format(row.data())).show();
            //    tr.addClass('shown');
            //}
        });
    });
    $('#btnSearch').click(function () {

        startDate = $('#reportrange').data('daterangepicker').startDate.format("MM-DD-YYYY");
        endDate = $('#reportrange').data('daterangepicker').endDate.format("MM-DD-YYYY");
        status = $('#searchbystatus').val();
        if ($.fn.DataTable.isDataTable("#tblExample")) {
            $('#tblExample').DataTable().destroy();
        }
        BindData();
    });

    $(function () {

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

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

        $('#reportrange').daterangepicker({
            startDate: start,
            showDropdowns: true,
            endDate: end,
            format: 'mmm-DD-YYYY',
            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);

    });

    function format(d) {
        debugger
        // `d` is the original data object for the row

        if (d == undefined) {
            html = ' <div style="text-align: center;">There is No City in <b>' + d.stateName + '</b> </div > ';
        }
        else if (d.companyRegionList == null)
            html = ' <div style="text-align: center;">There is No City in <b>' + d.stateName + '</b> </div > ';
        else {
            var html = '<div class="table-responsive light-thead border-bottom-0">' +
                '<table id="htmltable" class="table mb-0">' +
                '<thead><tr">' +
                '<th>CITY CODE</th>' +
                '<th>CITY NAME</th>' +
                '<th>DIRECTOR</th>' +
                '<th>CONTACT</th>' +
                '<th>STATUS</th>' +
                '</tr></thead><tbody>';

            for (let i in d.companyRegionList.companyList) {

                html += '<div><tr><td>' + d.companyRegionList.companyList[i].code + '</td>';
                html += '<td>' + d.companyRegionList.companyList[i].companyName + '</td>';
                html += '<td>' + d.companyRegionList.companyList[i].companyDirector + '</td>';
                html += '<td>' + d.companyRegionList.companyList[i].officePhone + '</td>';
                html += '<td>' + d.companyRegionList.companyList[i].companyStatus + '</td></tr>';
            }
        }

        html += '</tbody</table></div>';

        return html;
    }


    function BindData() {
        oTable = $('#tblExample').DataTable({
            scrollY: false,
            //destroy: true,
            ordering: false,
            paging: false,
            searching: false,
            info: false,
            "autoWidth": true,
            "ajax": {
                "url": "/company/GetData",
                "type": "Get",
                "datatype": "json",
                "dataSrc": "data",
                "data": {
                    Status: status,
                    startDate: startDate,
                    endDate: endDate
                }
            },
            columns: [
                { data: 'id', visible: false },
                { data: 'stateName' },
                { data: 'isRegion' },
                {
                    data: 'regionDirector'

                },
                { data: 'phoneNumber' },
                {
                    data: 'email'

                },
                {
                    "className": 'details-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": '+'
                }
            ],
            destroy: true
        });

    }
</script>
}

Here is the test result: