Unable to get property 'pageButton' of undefined or null reference
Unable to get property 'pageButton' of undefined or null reference
narengokal@gmail.com
Posts: 3Questions: 2Answers: 0
Initially, my website used MVCContrib grid and utilised, it's own css style. I have until recently, converted my site to use Bootstrap. Now, because of this, MVCContrib doesn't work - well, I do not know how to incorporate it(MVCCOntrib) into Bootstrap as I have tried.
Nevertheless, Im now using straight HTML and razor to now output my table grid. I'm trying to use my existing dataTable js files for pagination, sorting, etc .. However, im constantly getting an error:
" Unable to get property 'pageButton' of undefined or null reference"
I do not know what im doing wrong. This is how my page looks .. the trimmed version .. I just changed the names, else all is the same
``` <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
@model grepTMVC.Models.THeaderModelList
@{
ViewBag.Title = "T Requirer";
}
@{
ViewBag.Title = "T Requirer";
}
<head>
<meta content="IE=11.0000" http-equiv="X-UA-Compatible" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bid Or Travel</title>
<link href="@Url.Content("~/Content/style.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/dataTables.bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/dataTables.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<meta name="GENERATOR" content="MSHTML 11.00.9600.17037" />
$(document).ready(function () { $('#example').DataTable(); });</head>
@using (Html.BeginForm())
{
<body>
<div class="container">
<table id="example" class="table table-responsive" >
<thead>
<tr>
<th>T ID</th>
<th>D/s</th>
<th>created date</th>
<th>Close</th>
<th>Status</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.tID)
</td>
<td>
@Html.DisplayFor(modelItem => item.Dde)
</td>
<td>
@Html.DisplayFor(modelItem => item.creationDate)
</td>
<td>
@Html.DisplayFor(modelItem => item.close)
</td>
<td>
@Html.DisplayFor(modelItem => item.status)
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
}
</html> ```
Answers
Ok, I finally found the issue. I was using jquery.dataTables.js version 1.9.4 whereas I should be using version 1.10.11