Question

我正在使用tabelsorter（fork）＆amp;过滤小工具＆amp;排序。它的工作非常好。

现在我想使用stickyheader但不知何故它不起作用。它给我以下错误

Unhandled exception at line 2140, column 8 in http://localhost:51815/scripts/jquery.tablesorter.widgets.js

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'trigger'

应用程序的结构是链接：

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <title></title>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")

    @Styles.Render("~/Content/css")

</head>
<body>    
    <div class="container-fluid body-content">
        @RenderBody()
    </div>
    @RenderSection("viewScripts", required: false)
</body>
</html>

Index.cshtml

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

    @section viewScripts{

        @Scripts.Render("~/bundles/tablesorter")

        <script>

            $(function () { 

                $("#systemParameterMenu > a").click(function () {
                    var link = $(this).attr("link") + "?t=" + new Date().getTime();

                $("#systemParameterMenu > a").removeClass("active");
                $(this).addClass("active");

                var url = "@Url.Action("-1", "SystemParameter", new { area= "SystemParameter" })";
                url = url.replace("-1", link);
                $.ajax({
                    url: url,
                    type: 'GET',
                    datatype: "html",
                    success: function (response) {
                        $('#detailpane').html(response);
                        applyFilterAndSort();
                    },
                    error: function (xhr, ajaxOptions, thrownError) { alert(xhr.responseText); $('#detailpane').html(''); }
                });
                return false;
            });
        });

    </script>

    <script>
        function applyFilterAndSort() {
            $(".tablesorter").tablesorter({
                headers: {
                    // disable sorting of column
                    3: {
                        sorter: false,
                        filter: false
                    }
                },
                widgets: ['stickyHeaders', 'filter'],
                widgetOptions: {
                    filter_childRows: false,
                    filter_columnFilters: true,
                    filter_cssFilter: 'tablesorter-filter',
                    filter_functions: null,
                    filter_hideFilters: true,
                    filter_ignoreCase: true,
                    //filter_reset: 'button.btn-filter',
                    filter_searchDelay: 300,
                    filter_startsWith: false,
                    filter_useParsedData: false,
                    // css class name applied to the sticky header row (tr)
                    stickyHeaders: 'tablesorter-stickyHeader'
                }
            });

            $('#filter').click(function () {
                var filters = $('.tablesorter').find('input.tablesorter-filter');

                filters.val('');

                var isFilterVisible = filters.parents('tr').hasClass('hideme');

                if (isFilterVisible) {
                    filters.parents('tr').removeClass('hideme');
                }
                else {
                    filters.parents('tr').addClass('hideme');
                    filters.parents('table').find('tr').removeClass('filtered');
                }
            });
        }
    </script>
}

<div>
    <div id="mainSplitter">
        <div style="overflow:hidden;">
            <div id="infopane" style="overflow: auto;">
                @{Html.RenderAction("MenuList", "Parameters"); }
            </div>
        </div>
        <div style="overflow:hidden;">
            <div id="detailpane" style="overflow:auto;">
            </div>
        </div>
    </div>
</div>

ViewPage.cshtml

<div class="container-fluid">
    <div class="row">
        <div class="panel panel-primary filterable">
            <div class="panel-heading">
                <h3 class="panel-title">xxxxx/h3>
                <div class="pull-right">
                    <button class="btn btn-default btn-xs btn-primary" id="createNew"><span class="fa fa-plus"></span> Create New</button>
                    <button class="btn btn-default btn-xs btn-filter" id="filter"><span class="fa fa-filter"></span> Filter</button>
                    <button class="btn btn-default btn-xs btn-default" id="help"><span class="fa fa-question"></span> Help</button>
                </div>
            </div>
            <div class="">
                <table class="table table-hover table-condensed tablesorter">
                    <thead>
                        <tr class="filters">
                            <th data-placeholder="e.g. >10 or <100 or 10">Function ID</th>
                            <th>Packaging Function Name</th>
                            <th>In Use</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.FUNCTION_ID)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.FUNCTION_NAME)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.IN_USE)
                                </td>
                                <td>
                                    <button class="btn btn-default btn-xs btn-info" id="edit"><span class="fa fa-edit"></span> Edit</button>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

CSS：

.filterable .panel-heading .pull-right {
    margin-top: -20px;
}

.tablesorter .hideme {
    display: none;
}

.tablesorter thead .disabled {
    display: none;
}

.tablesorter-filter input[disabled] {
    background-color: transparent;
    border: none;
    cursor: auto;
    box-shadow: none;
    padding: 0;
    height: auto;
}

    .tablesorter-filter input[disabled]::-webkit-input-placeholder {
        color: #333;
    }

    .tablesorter-filter input[disabled]::-moz-placeholder {
        color: #333;
    }

    .tablesorter-filter input[disabled]:-ms-input-placeholder {
        color: #333;
    }

我正在使用以下框架

jquery v2.2.1

Bootstrap v3.3.6

jquery.tablesorter.js v2.25.8

jquery.tablesorter.widgets.js v2.25.8

任何帮助将不胜感激。感谢!!!

更新：我尝试了所有其他小部件，除了stickyHeaders以外，它们的工作正常。我完全不确定它有什么问题。

更新2 ：调试日志。

更新3 ：更改的代码出错

更新4 ：请求的HTML 在应用tablesorter之前

<table class="table table-hover tablesorter">
    <thead>
        <tr class="filters">
            <th data-placeholder="e.g. >10 or <100 or 10">Status ID</th>
            <th>Description</th>
            <th>Type</th>
            <th>In Use</th>
            <th></th>
        </tr>
    </thead>
</table>

应用tablesorter后

    <table class="table table-hover tablesorter tablesorter-default hasFilters" role="grid">
        <thead>
            <tr class="filters tablesorter-headerRow" role="row">
                <th tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" role="columnheader" aria-disabled="false" style="-ms-user-select: none;" aria-label="Status ID: No sort applied, activate to apply an ascending sort" aria-sort="none" scope="col" data-column="0" unselectable="on" data-placeholder="e.g. >10 or <100 or 10"><div class="tablesorter-header-inner">Status ID</div></th>
                <th tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" role="columnheader" aria-disabled="false" style="-ms-user-select: none;" aria-label="Description: No sort applied, activate to apply an ascending sort" aria-sort="none" scope="col" data-column="1" unselectable="on"><div class="tablesorter-header-inner">Description</div></th>
                <th tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" role="columnheader" aria-disabled="false" style="-ms-user-select: none;" aria-label="Type: No sort applied, activate to apply an ascending sort" aria-sort="none" scope="col" data-column="2" unselectable="on"><div class="tablesorter-header-inner">Type</div></th>
                <th tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" role="columnheader" aria-disabled="false" style="-ms-user-select: none;" aria-label="In Use: No sort applied, activate to apply an ascending sort" aria-sort="none" scope="col" data-column="3" unselectable="on"><div class="tablesorter-header-inner">In Use</div></th>
                <th tabindex="0" class="tablesorter-header tablesorter-headerUnSorted sorter-false" role="columnheader" aria-disabled="false" style="-ms-user-select: none;" aria-label=": No sort applied, activate to apply an ascending sort" aria-sort="none" scope="col" data-column="4" unselectable="on"><div class="tablesorter-header-inner"></div></th>
            </tr>
            <tr class="tablesorter-filter-row tablesorter-ignoreRow hideme" role="row">
                <td data-column="0"><input class="tablesorter-filter" type="search" placeholder="e.g. >10 or <100 or 10" data-column="0" data-lastsearchtime="1461532518467"></td>
                <td data-column="1"><input class="tablesorter-filter" type="search" placeholder="" data-column="1" data-lastsearchtime="1461532518467"></td>
                <td data-column="2"><input class="tablesorter-filter" type="search" placeholder="" data-column="2" data-lastsearchtime="1461532518467"></td>
                <td data-column="3"><input class="tablesorter-filter" type="search" placeholder="" data-column="3" data-lastsearchtime="1461532518467"></td>
                <td data-column="4"><input class="tablesorter-filter disabled" type="search" placeholder="" data-column="4" data-lastsearchtime="1461532518467"></td>
            </tr>
        </thead>
</table>

Answer 1

我使用你分享的一些代码设置了这个演示...我没有看到javascript错误，但我确实发现了一些代码问题（demo）：

添加<button>时，请添加type="button"属性：<button type="button"></button>，因为它默认为submit，除非已停止，否则可能会重新加载页面。
不是将filter_hideFilters option设置为true并重新定义.hideme样式，而是使用过滤器切换按钮隐藏整行。
在tablesorter初始化之后绑定并初始化过滤器切换按钮，或者最初不会隐藏粘滞头过滤器行。
最后，下面的代码不包含已设置为默认值的设置。

CSS

.tablesorter .hidden {
  display: none;
}

JS

$(function() {

  var $table = $('table'),
    bindFilterButton = function() {
      $('#filter').click(function() {
        // reset filters
        $.tablesorter.setFilters($table, []);
        $table.toggleClass('filtered');
        // this targets the table filter row and the stickyheader filter row
        $('.tablesorter-filter-row').toggleClass('hidden');
        return false;
      })
      // initially hide filter row
      .click();
    };

  $('table').tablesorter({
    theme: 'blue',
    widthFixed: true,
    widgets: ['zebra', 'filter', 'stickyHeaders'],
    widgetOptions: {
      // filter_reset: 'button.btn-filter'
    },
    initialized: bindFilterButton
  });

});

Tablesorter小部件StickyHeaders小部件无法在ajax加载的mvc局部视图中工作

1 个答案: