1

我正在开发一个应用程序，在该应用程序中我正在使用淘汰赛 Js，并且我正在尝试通过单击带有 jquery.tablesorter.js 的相应列来实现表排序。在没有淘汰赛 Js 的 MVC4 Web API 排序中工作正常。我有下面的代码

1. 索引.cshtml

<div class="loadingIndicator" data-bind="visible: loading()"></div>
<table class="newProduct">
    <thead>
    <tr>
        <th><a class="btn btn-success" data-bind="click: add, visible: !loading()">New Product</a>
        </th>

    </tr>
        </thead>
</table>



<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

     <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.tablesorter.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>


</script>*@

@*<table class="productTable" data-bind="visible: !loading()">*@
    <table class="productTable" data-bind="sortTable:true">
    <thead>

        <tr>
            <th>Product</th>
            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>



            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </thead>
    <tbody data-bind="foreach: canadiancrudes">
       <tr> <td data-bind="text: Product"></td>
    <td data-bind="text: Term"></td>
    <td data-bind="text: Location"></td>
    <td data-bind="text: Pipeline"></td>
    <td data-bind="text: BidCP"></td>
    <td data-bind="text: BidVolume"></td>
    <td data-bind="text: Index"></td>

</tr>

        <tr></tr>
    </tbody>

    <tfoot>
        <tr>
            <th>Product</th>
            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>



            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </tfoot>
</table>
@section scripts {
    <script src="~/Scripts/knockout-2.2.1.js"></script>
    <script src="~/App/CustomBindings.js"></script>
    <script src="~/Scripts/jquery.signalR-1.0.0.min.js"></script>
    <script src="/signalr/hubs"></script>
    <script src="~/App/CanadianCrudeViewModel.js"></script>

}

2.查看模型

var CanadianCrudeViewModel = function (CanadianContext) {
  var self = this;
  self.canadiancrudes = ko.observableArray();
  self.loading = ko.observable(true);

self.add = function (canadiancrude) {
      var payload = {
          Term: "Term", Product: "Product" , Location: "Location", Pipeline: "Pipeline",
          BidCP: "Bid CP", BidVolume: "Bid Volume", Index: "Index", Bid: "0.0", Offer: "0.0",
          OfferVolume:"Offer Volume", OfferCP:"Offer CP"
      };
    $.ajax({
        url: '/odata/Canadiancrudes',
      type: 'POST',
      //  data: ko.toJSON(payload),
      data: JSON.stringify(payload),
      contentType: 'application/json',
      dataType: 'json'
    });
  }
}


ko.bindingHandlers.sortTable = {
    init: function (element, valueAccessor) {
        setTimeout(function () {
            $(element).addClass('tablesorter');
            $(element).tablesorter({ widgets: ['zebra'] });
        }, 0);
    }
};

由于某些原因，当我单击列时无法对表格进行排序并引发异常

Uncaught TypeError: Cannot read property '0' of undefined

我知道当我们尝试将 tablesorter 应用于空表时，通常会出现此错误，但在我的代码中，我将数据绑定到标签内的表。我可以知道我在装订或其他任何事情时犯了什么错误。

4

0 回答 0