Scribd
Upload
126 views3 pages

DataTable CSHTML

The document defines a model and view for displaying a data table using the jQuery DataTables plugin. It includes markup for the table header and body, and JavaScript code to initialize the DataTables plugin and add filtering functionality. The table loads data asynchronously from a server URL via AJAX calls, and supports features like sorting, filtering, pagination and more through DataTables options.

Uploaded by

Gourav Karmakar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
126 views3 pages

DataTable CSHTML

The document defines a model and view for displaying a data table using the jQuery DataTables plugin. It includes markup for the table header and body, and JavaScript code to initialize the DataTables plugin and add filtering functionality. The table loads data asynchronously from a server URL via AJAX calls, and supports features like sorting, filtering, pagination and more through DataTables options.

Uploaded by

Gourav Karmakar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

@using System.Data.

Odbc
@using System.Linq
@using Mvc.JQuery.Datatables
@model DataTableConfigVm
<table id="@Model.Id" class="display @(Model.TableClass ?? DataTableConfigVm.Def
aultTableClass ?? "")" >
<thead>
@if (Model.ColumnFilter)
{
<tr>
@foreach (var column in Model.Columns)
{
<th class="ui-state-default">@column.DisplayName
</th>
}
</tr>
}
@if (!Model.HideHeaders)
{
<tr>
@foreach (var column in Model.Columns)
{
<th>@column.DisplayName</th>
}
</tr>
}
</thead>
<tbody>
<tr>
<td colspan="@Model.Columns.Count()" class="dataTables_empty">
Loading data from server
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var dt;var x;
(function setDataTable() {
if(!window.jQuery) {
setTimeout(setDataTable, 100);
return;
}
var $table = $('#@Model.Id');
dt = $table.dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": @Html.Raw(Model.ColumnSortingString),
"bProcessing": true,
"bStateSave": @Html.Raw(Model.StateSave ? "true" : "false"),
"bServerSide": true,
"deferRender": true,
"bFilter": @Model.ShowSearch.ToString().ToLower(),
"aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
"bAutoWidth": @Model.AutoWidth.ToString().ToLowerInvariant(),
"sAjaxSource": "@Html.Raw(Model.AjaxUrl)", @Html.Raw(Model.TableTool
s ? "\"oTableTools\" : { \"sSwfPath\": \"/content/DataTables/extras/TableTools/m
edia/swf/copy_csv_xls_pdf.swf\" }," : "")
"fnServerData": function(sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',

"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"aoColumnDefs" : @Html.Raw(Model.ColumnDefsString)
@Html.Raw(!string.IsNullOrWhiteSpace(Model.JsOptionsString) ? ",
" + Model.JsOptionsString : "")
@if (!string.IsNullOrEmpty(Model.Language))
{
<text>
,"oLanguage": @Html.Raw(@Model.Language)
</text>
}
@if (!string.IsNullOrEmpty(Model.DrawCallback))
{
<text>
,"fnDrawCallback": @Html.Raw(Model.DrawCallback)
</text>
}
});
@if (Model.ColumnFilter)
{
string columnFilterConfig = "[";
foreach (var column in Model.Columns)
{
if (columnFilterConfig != "[")
{
columnFilterConfig += ",";
}
columnFilterConfig += "{'type':'text'}";
}
columnFilterConfig = columnFilterConfig + "],";
columnFilterConfig = "{'aoColumns':" + columnFilterConfig + "'sP
laceHolder':'head:after','bUseColVis':true}";
<text>
dt.columnFilter(@Html.Raw(columnFilterConfig));
</text>
}
$(".dataTables_filter input").attr("placeholder", "Press CTRL to Search"
);
$(".dataTables_filter input")
.unbind() // Unbind previous default bindings
.bind("keyup", function(e) { // Bind our desired behavior
// If the length is 3 or more characters, or the user pressed EN
TER, search
//
if(this.value.length >= 3 || e.keyCode == 13) {
x = e;
var code = e.keyCode || e.which;
if (code == 17) {
//e.preventDefault();
// Call the API search function
dt.fnFilter(this.value,null,false,true,true,false);
return false;
}

// Ensure we clear the search if they backspace far enough


if(this.value == "") {
dt.fnFilter("");
}
return;
});
//
.bind("keyup", function(e) { // Bind our desired behavior
//
// If the length is 3 or more characters, or the user pressed ENTER
, search
//
// Ensure we clear the search if they backspace far enough
//
if(this.value == "") {
//
dt.fnFilter("");
//
}
//
return;
//
});
})();
</script>

You might also like