@model HelloWorldMvcApp.SampleViewModel
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
.field-validation-error {
<table id="tickets" class="display" style="width:90%">
@foreach (var ticket in Model.Tickets){
<td>@ticket.Description</td>
<td>@ticket.CustomerName</td>
<td>@ticket.ReportedBy</td>
<td>@ticket.CreationTime</td>
<button type="button" class="btn btn-success submitOpen">All Open</button>
<button type="button" class="btn btn-success submitActive">Only Active</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.2.3/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(formatTable());
// Setup - add a text input to each footer cell
.appendTo('#tickets thead');
var table = $('#tickets').DataTable({
initComplete: function () {
.each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
var title = $(cell).text();
$(cell).html('<input type="text" placeholder="' + title + '" />');
// On every keypress in this input
$('.filters th').eq($(api.column(colIdx).header()).index())
.on('change', function (e) {
$(this).attr('title', $(this).val());
var regexr = '({search})'; //$(this).parents('th').find('select').val();
var cursorPosition = this.selectionStart;
// Search the column for that value
? regexr.replace('{search}', '(((' + this.value + ')))')
.on('keyup', function (e) {
$(this).trigger('change');
.setSelectionRange(cursorPosition, cursorPosition);
function populateTable(jsonData) {
var oTable = $("#tickets").dataTable();
loadTable('tickets', ['Status', 'Title', 'Description', 'Impact', 'Customer','ReportedBy','CreationTime', 'Id'], jsonData);
function loadTable(tableId, fields, data) {
//$('#' + tableId).empty(); //not really necessary
var table = $('#' +tableId).DataTable();
$.each(data, function(index, item) {
$.each(fields, function(index, field) {
row += '<td>' + item[field+''] + '</td>';
var newRow = row + '<tr>';
table.row.add($(newRow )).draw();
$('.submitActive').click(function(){
var tickets = @Html.Raw(Json.Encode(Model.Tickets));
modelTickets: JSON.stringify(tickets),
$('.submitOpen').click(function(){
var tickets = @Html.Raw(Json.Encode(Model.Tickets));
modelTickets: JSON.stringify(tickets),
function getData(request)
$.post("@Url.Action("GetTickets")",request,function(data)