@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>