@{
ViewBag.Title = "Index";
}
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#firstTab">View All</a></li>
<li><a data-toggle="tab" href="#secondTab">Add New</a></li>
<li><a data-toggle="tab" href="#thirdTab">Knowledge</a></li>
<li><a data-toggle="tab" href="#fourthTab">IT Tasks</a></li>
</ul>
<div class="tab-content">
<div id="firstTab" class="tab-pane fade in active">@Html.Action("ViewAll")</div>
<div id="secondTab" class="tab-pane fade in">@Html.Action("AddOrEdit")</div>
<div id="thirdTab" class="tab-pane fade in">@Html.Action("ViewAllKnowledge")</div>
<div id="fourthTab" class="tab-pane fade in">@Html.Action("ViewAllTasks")</div>
</div>
@*jQuery Datatable CSS*@
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css">
@section scripts
{
@Scripts.Render("~/bundles/jqueryval")
@*jQuery Datatable JS*@
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>
<script>
function activatejQueryTable() {
var table = $('#ticketTable').DataTable({
rowReorder: { selector: 'tr' },
colReorder: true,
"stateSave": true,
"stateDuration": 0,
"autoWidth": false,
"columnDefs": [
{ "width": "40px", "targets": 0, "visible": true },
{ "width": "150px", "targets": 1, "visible": true }, //dtLastUpdated
{ "width": "250px", "targets": 2, "visible": true }, //vcSubject
{ "width": "150px", "targets": 3, "visible": true }, //vcFrom
{ "width": "53px", "targets": 4, "visible": true }, //vcPriority
{ "width": "90px", "targets": 5, "visible": true }, //vcAssignedTo
{ "width": "53px", "targets": 6, "visible": true }, //vcStatus
{ "width": "90px", "targets": 7, "visible": true }, //vcRequestType
{ "width": "90px", "targets": 8, "visible": true }, //vcLocation
{ "width": "90px", "targets": 9, "visible": true }, //vcCategory
{ "width": "90px", "targets": 10, "visible": true }, //dtAnticipatedCompletion
{ "width": "100px", "targets": 11, "visible": true } //edit and delete buttons
],
//Create the dropdowns
responsive: true,
"bAutoWidth": false,
initComplete: function () {
this.api().columns([4, 5, 6, 7, 8, 9]).every(function () {
var column = this;
var select = $('<select class="myDropdown"><option value=""></option></select>')
.appendTo($("#filters").find("th").eq(column.index()))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
column.search(val ? '^' + val + '$' : '', true, false).draw();
})
.on('click', function (e) {
e.stopPropagation();
});
column.data().unique().sort().each(function (d, j) {
$(select).append('<option value="' + d + '">' + d + '</option>')
});
});
}
//End of create dropdowns
});
}
//});
$(function () {
activatejQueryTable();
});
</script>
}
`Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.
When asked, what has been your best career decision?
Deciding to stick with EE.
Being involved with EE helped me to grow personally and professionally.
Connect with Certified Experts to gain insight and support on specific technology challenges including:
We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE