jwebster77
asked on
YADCF Datatable not working - jQuery
Hi,
When I click on "Knowledge" tab(see attached) the data shows but the datatable does not get implemented. What is the mistake I am making? I could not find a solution as I seem to do everything correctly. Attached is shown how the data appears when I click on the tab in question. Thank you.
Here is my code:
When I click on "Knowledge" tab(see attached) the data shows but the datatable does not get implemented. What is the mistake I am making? I could not find a solution as I seem to do everything correctly. Attached is shown how the data appears when I click on the tab in question. Thank you.
Here is my code:
@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>
Hi,
All tabs are in fact on the same page
So if you have multiple datatables on the same page :
-make sure each datatables have their unique ID
-make sure they all have their JS options set
-make sure to load all JS only once per page!
All tabs are in fact on the same page
So if you have multiple datatables on the same page :
-make sure each datatables have their unique ID
-make sure they all have their JS options set
-make sure to load all JS only once per page!
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
ASKER