个人中心
gpt4 book ai didi

css - Bootstrap 和 DataTables - Jquery 错误

转载 作者：行者123 更新时间：2023-11-28 06:18:11 25 4
gpt4 key购买 nike

我对前端编码不太了解，所以请多多包涵。

最初，我的网站使用 MVCContrib 网格并利用它自己的 css 样式。直到最近，我才将我的网站转换为使用 Bootstrap。现在，由于这个原因，MVCContrib 不起作用 - 好吧，我不知道如何将它(MVCCOntrib)合并到 Bootstrap 中，因为我已经尝试过了。

不过，我现在直接使用 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>

请有人帮忙..

上面的错误是针对dataTables.bootstrap.js

下面是js文件中错误指向的函数:

/* 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 = '&#x2026;';
            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++;
        }
      }
    }
  };

最佳答案

如果它说

Unable to get property 'pageButton' of undefined or null reference

这显然意味着它无法找到在您的 HTML 中定义的表格。在你的里面<tbody> .我可以看到第 4 个 <td>标签未正确关闭。是</td (缺少 > )。可能这就是原因。

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

关于css - Bootstrap 和 DataTables - Jquery 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35765809/

25 4 0
文章推荐： html - 两个可调整大小的 div ，改变一个会改变另一个
文章推荐： javascript - 是否可以在单个 HTML 页面中包含多个 leaflet/mapbox map ？
文章推荐： ios - 如何在 AVCaptureVideoPreviewLayer 上添加叠加层？
文章推荐： javascript - 使用 AJAX XMLHttpRequest 填充 DataTable 的主体
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com