Я не использую таблицу данных при поиске по умолчанию. Я реализовал собственные функции поиска. Когда первая страница загружается, она работает нормально, но когда я пытаюсь выполнить поиск, она выдает ошибку, и я не могу развернуть таблицу строк данных. ** Это мой файл просмотра **
@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" />
<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>
}
** Это мои два метода действий, которые я использовал **
public IActionResult Index()
{
return View();
}
public IActionResult GetData()
{
var abc = companyService.getStateWiseCompanyDetail(null, null, null);
return Json(new { data = abc.Result });
}
После ввода значений, когда я пытаюсь выполнить поиск, он дает мне следующую ошибку.
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)