Css 引导和数据表-Jquery错误
我不太懂前端编码，所以请耐心听我说 最初，我的网站使用MVCContrib网格，并使用自己的css样式。直到最近，我才将我的站点转换为使用Bootstrap。现在，由于这个原因，MVCContrib不起作用——好吧，我不知道如何将它（MVCContrib）合并到我已经尝试过的引导中 尽管如此，我现在使用直接HTML和razor来输出我的表格网格。我正在尝试使用现有的dataTable js文件进行分页、排序等。。但是，我经常会遇到一个错误： “无法获取未定义或空引用的属性'pageButton'” 我不知道我做错了什么。这就是我的页面的外观。。修剪过的版本。。我只是换了名字，其他的都一样Css 引导和数据表-Jquery错误,css,twitter-bootstrap,datatables,Css,Twitter Bootstrap,Datatables,我不太懂前端编码，所以请耐心听我说 最初，我的网站使用MVCContrib网格，并使用自己的css样式。直到最近，我才将我的站点转换为使用Bootstrap。现在，由于这个原因，MVCContrib不起作用——好吧，我不知道如何将它（MVCContrib）合并到我已经尝试过的引导中 尽管如此，我现在使用直接HTML和razor来输出我的表格网格。我正在尝试使用现有的dataTable js文件进行分页、排序等。。但是，我经常会遇到一个错误： “无法获取未定义或空引用的属性'pageButton'
<!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" />
<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/media/js/jquery.dataTables.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/dataTables.bootstrap.js")" type="text/javascript"></script>
<meta name="GENERATOR" content="MSHTML 11.00.9600.17037" />
<script type="text/javascript">
$(document).ready(function () {
$('#example').DataTable();
});
</script>
</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>
@model grepTMVC.Models.THeaderModelList
@{
ViewBag.Title=“T需求者”；
}
@{
ViewBag.Title=“T需求者”；
}
投标或旅行
$（文档）.ready（函数（）{
$（“#示例”）.DataTable（）；
});
@使用（Html.BeginForm（））
{
T ID
承兑交单
创建日期
接近
地位
@foreach（模型中的var项目）
{
@DisplayFor（modeleItem=>item.tID）
@DisplayFor（modelItem=>item.Dde）
@DisplayFor（modelItem=>item.creationDate）
@DisplayFor（modelItem=>item.close）
项目1（现状）
}
}
/* Bootstrap paging button renderer */
DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) {
var api = new DataTable.Api( settings );
var classes = settings.oClasses;
var lang = settings.oLanguage.oPaginate;
var aria = settings.oLanguage.oAria.paginate || {};
var btnDisplay, btnClass, counter=0;
var attach = function( container, buttons ) {
var i, ien, node, button;
var clickHandler = function ( e ) {
e.preventDefault();
if ( !$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action ) {
api.page( e.data.action ).draw( 'page' );
}
};
for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
button = buttons[i];
if ( $.isArray( button ) ) {
attach( container, button );
}
else {
btnDisplay = '';
btnClass = '';
switch ( button ) {
case 'ellipsis':
btnDisplay = '…';
btnClass = 'disabled';
break;
case 'first':
btnDisplay = lang.sFirst;
btnClass = button + (page > 0 ?
'' : ' disabled');
break;
case 'previous':
btnDisplay = lang.sPrevious;
btnClass = button + (page > 0 ?
'' : ' disabled');
break;
case 'next':
btnDisplay = lang.sNext;
btnClass = button + (page < pages-1 ?
'' : ' disabled');
break;
case 'last':
btnDisplay = lang.sLast;
btnClass = button + (page < pages-1 ?
'' : ' disabled');
break;
default:
btnDisplay = button + 1;
btnClass = page === button ?
'active' : '';
break;
}
if ( btnDisplay ) {
node = $('<li>', {
'class': classes.sPageButton+' '+btnClass,
'id': idx === 0 && typeof button === 'string' ?
settings.sTableId +'_'+ button :
null
} )
.append( $('<a>', {
'href': '#',
'aria-controls': settings.sTableId,
'aria-label': aria[ button ],
'data-dt-idx': counter,
'tabindex': settings.iTabIndex
} )
.html( btnDisplay )
)
.appendTo( container );
settings.oApi._fnBindAction(
node, {action: button}, clickHandler
);
counter++;
}
}
}
};
/*引导分页按钮渲染器*/
DataTable.ext.renderer.pageButton.bootstrap=函数（设置、主机、idx、按钮、页面、页面）{
var api=新的DataTable.api（设置）；
变量类=settings.oClasses；
var lang=settings.oLanguage.oPaginate；
var aria=settings.olalanguage.oAria.paginate | |{}；
变量btnDisplay，btnClass，计数器=0；
var attach=功能（容器、按钮）{
变量i、ien、节点、按钮；
var clickHandler=函数（e）{
e、 预防默认值（）；
if（！$（e.currentTarget）.hasClass（'disabled'）&&api.page（）！=e.data.action）{
api.page（e.data.action）.draw（'page'）；
}
};
对于（i=0，ien=buttons.length；i 0？
“‘残疾’”；
打破
“先前”案例：
btnDisplay=lang.splevious；
btnClass=按钮+（页面>0？
“‘残疾’”；
打破
“下一个”案例：
btnDisplay=lang.sNext；
btnClass=按钮+（第页<第1页？
“‘残疾’”；
打破
“最后”一案：
btnDisplay=lang.sLast；
btnClass=按钮+（第页<第1页？
“‘残疾’”；
打破
违约：
btnDisplay=按钮+1；
btnClass=页面===按钮？
'主动'：''；
打破
}
如果（btnDisplay）{
节点=$（“”{
“类”：类。sPageButton+“”+btnClass，
“id”：idx==0&&typeof按钮===string”？
settings.sTableId+''按钮：
无效的
} )
.附加（$（''）{
“href”：“#”，
“aria控件”：settings.sTableId，
“aria标签”：aria[按钮]，
“数据dt idx”：计数器，
“tabindex”：settings.iTabIndex
} )
.html（btnDisplay）
)
.附在（容器）上；
settings.oApi.\u fnBindAction(
节点，{action:button}，clickHandler
);
计数器++；
}
}
}
};
<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>
@foreach（模型中的var项目）
{
@DisplayFor（modeleItem=>item.tID）
@DisplayFor（modelItem=>item.Dde）
@DisplayFor（modelItem=>item.creationDate）
@DisplayFor（modelItem=>item.close）
项目1（现状）
}
~/Scripts/bootstrap.js~/Scripts/bootstrap.min.jspageButton