@model IEnumerable<HelpDeskSupport.Models.KnowledgeBaseModel>
@{
Layout = null;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="jquery.datatables.yadcf.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="jquery.dataTables.yadcf.js"></script>
<style>
.label {
padding: 0px 10px 0px 10px;
border: 1px solid #ccc;
-moz-border-radius: 1em; /* for mozilla-based browsers */
-webkit-border-radius: 1em; /* for webkit-based browsers */
border-radius: 1em; /* theoretically for *all* browsers*/
}
.label.lightblue {
background-color: #99CCFF;
}
#external_filter_container_wrapper {
margin-bottom: 20px;
}
#external_filter_container {
display: inline-block;
}
</style>
<script>
$(document).ready(function () {
//'use strict';
$('#knowledgeTable').dataTable().yadcf([
{
column_number: 0,
filter_type: "auto_complete",
text_data_delimiter: ","
}, {
column_number: 1,
filter_type: "auto_complete",
text_data_delimiter: ","
}, {
column_number: 2
}, {
column_number: 3,
}, {
column_number: 4,
filter_type: "date"
}, {
column_number: 5,
}, {
column_number: 6,
filter_type: "text",
exclude: true,
exclude_label: '!(not)'
}, {
column_number: 7,
filter_type: "date"
}, {
column_number: 8,
}, {
column_number: 9,
}
]);
});
</script>
</head>
<table class="display table table-striped table-bordered" id="knowledgeTable">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.KBSubject)
</th>
<th>
@Html.DisplayNameFor(model => model.KBFrom)
</th>
<th>
@Html.DisplayNameFor(model => model.KBAssignedTo)
</th>
<th>
@Html.DisplayNameFor(model => model.KBAssignedDt)
</th>
<th>
@Html.DisplayNameFor(model => model.KBRequestType)
</th>
<th>
@Html.DisplayNameFor(model => model.KBBody)
</th>
<th>
@Html.DisplayNameFor(model => model.KBDateSubmitted)
</th>
<th>
@Html.DisplayNameFor(model => model.KBLocation)
</th>
<th>
@Html.DisplayNameFor(model => model.KBCategory)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.KBSubject)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBFrom)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBAssignedTo)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBAssignedDt)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBRequestType)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBBody)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBDateSubmitted)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBLocation)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBCategory)
</td>
</tr>
}
</tbody>
</table>
<link href="jquery.datatables.yadcf.css" rel="stylesheet" type="text/css" />
<script src="jquery.dataTables.yadcf.js"></script>
@model IEnumerable<HelpDeskSupport.Models.KnowledgeBaseModel>
@{
Layout = null;
}
<!DOCTYPE html>
<head>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/yadcf-master/jquery.dataTables.yadcf.css"></script>
<script src="~/yadcf-master/jquery.dataTables.yadcf.js"></script>
<script src="~/DataTables/datatables.css"></script>
<script src="~/DataTables/datatables.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>
<table class="display table table-striped table-bordered" id="knowledgeTable">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.KBSubject)
</th>
<th>
@Html.DisplayNameFor(model => model.KBFrom)
</th>
<th>
@Html.DisplayNameFor(model => model.KBAssignedTo)
</th>
<th>
@Html.DisplayNameFor(model => model.KBAssignedDt)
</th>
<th>
@Html.DisplayNameFor(model => model.KBRequestType)
</th>
<th>
@Html.DisplayNameFor(model => model.KBBody)
</th>
<th>
@Html.DisplayNameFor(model => model.KBDateSubmitted)
</th>
<th>
@Html.DisplayNameFor(model => model.KBLocation)
</th>
<th>
@Html.DisplayNameFor(model => model.KBCategory)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.KBSubject)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBFrom)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBAssignedTo)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBAssignedDt)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBRequestType)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBBody)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBDateSubmitted)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBLocation)
</td>
<td>
@Html.DisplayFor(modelItem => item.KBCategory)
</td>
@*<td>
@Html.ActionLink("Edit", "Edit", new { id=item.KBNumber }) |
@Html.ActionLink("Details", "Details", new { id=item.KBNumber }) |
@Html.ActionLink("Delete", "Delete", new { id=item.KBNumber })
</td>*@
</tr>
}
</tbody>
</table>
<script>
$(document).ready(function () {
'use strict';
var oTable;
oTable = $('#knowledgeTable').DataTable({
stateSave: true
});
yadcf.init(oTable, [
{
column_number: 0
//*filter_type: "auto_complete",
//*text_data_delimiter: ","
}, {
column_number: 1
//*filter_type: "auto_complete",
//*text_data_delimiter: ","
//filter_type: "range_number_slider"
}, {
column_number: 2
//filter_type: "date"
}, {
column_number: 3
}, {
column_number: 4
//*filter_type: "date"
//column_data_type: "html",
//html_data_type: "text",
//filter_default_label: "Select tag"
}, {
column_number: 5
}, {
column_number: 6
//*filter_type: "text",
//*exclude: true,
//*exclude_label: '!(not)'
}, {
column_number: 7
//*filter_type: "date"
}, {
column_number: 8
}
]);
});
</script>
[embed=file 1437607]
using Chrome right click / inspect, do you have any errors into the console tab?
Also where do you want to display the filter exactly?
I do prefer externally triggered display https://yadcf-showcase.appspot.com/dom_source_externally_triggered.html
Note having the table into a tab is not a good idea, specially for mobile small view plus you may have incompatibility with Datatables