【问题标题】:tablesorter plugin, i am not able to make it work表格排序器插件,我无法使其工作
【发布时间】:2017-03-14 17:11:15
【问题描述】:

我是编码新手,我不知道我的问题可能很简单,但我最近开始学习编码。

对于我的简单应用程序,我想对表格进行排序并为其设置一个搜索框。

我已尝试下载最新的 jquery.tablesorter.js、widgets-filter.js。并尝试对基本表进行排序。但我无法让它工作。我无法正确找到任何示例下载文件,因此我会尝试理解它。在我见过的大多数插件中都有一个可以下载的演示文件夹,其中包含插件的基本演示。

对于我的应用程序,我需要在页面加载和加载后基于两列对表格进行排序,我必须能够使用搜索框进行搜索。正如这里提供的演示https://mottie.github.io/tablesorter/docs/example-widget-filter-any-match.html

我尝试查看页面的源代码并尝试使用与那里相同的插件,但我无法使其工作。 有人可以帮我让它工作,并指出我可以下载演示文件夹或类似的东西,以便我能理解它。

【问题讨论】:

  • 示例文档包含在 Github 上列出的下载中,您要查找的特定文档的路径是 tablesorter-2.27.8/docs/example-widget-filter-any-match.html

标签: javascript jquery sorting tablesorter tablesort


【解决方案1】:

这是一个使用带有外部搜索输入的过滤器小部件的简化演示:https://jsbin.com/qahuba/1/edit?html,output

基本 HTML

<input type="text" data-column="all" class="search">
<table><!-- thead & tbody required --></table>

基本脚本

<script src="//code.jquery.com/jquery-git.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script>
/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {
  $('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'filter'],
    widgetOptions: {
      // jQuery selector string (or jQuery object) of external filters
      filter_external: '.search',
      // If true, a filter will be added to the top of each table column.
      filter_columnFilters: false
    }
  });
});
</script>

注意:在生产环境中,指向您自己服务器上的 jQuery 和 tablesorter 文件或来自稳定的 CDN 源(即不是 jquery-git.js 文件或直接来自 github 的文件)。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多