单击 X 时表格不会重置

Posted 2023-05-09

技术标签:

【中文标题】单击 X 时表格不会重置【英文标题】：Table doesn't reset when click on X 【发布时间】：2015-06-15 12:12:52 【问题描述】：

$(function()
        $table = $('#myTable')
                .tablesorter(
                    theme: 'blue',
                    widthFixed: true,
                    headerTemplate: 'content icon',
                    widgets: ['zebra','filter'],
                    widgetOptions: 
                        zebra: ["even", "odd"],
                        // filter_anyMatch replaced! Instead use the filter_external option
                        // Set to use a jQuery selector (or jQuery object) pointing to the
                        // external filter (column specific or any match)
                        filter_external : '.search',
                        // add a default type search to the first name column
                        filter_defaultFilter:  1 : '~query' ,
                        // include column filters
                        filter_columnFilters: true,
                        filter_placeholder:  search : 'Search...' ,
                        filter_saveFilters : true,
                        filter_reset: '.reset'
                    
                )
            // needed for pager plugin to know when to calculate filtered rows/pages
                .addClass('hasFilters')
                .tablesorterPager(
                    container: $(".table-pager"),
                    output: 'page of filteredPages (filteredRows)',
                    size: 5
                );

        $('#search').quicksearch('table tbody tr', 
            delay: 500,
            show: function () 
                $(this).removeClass('filtered');
                $table.trigger('pageSet'); // reset to page 1 & update display
            ,
            hide: function () 
                $(this).hide().addClass('filtered');
                $table.trigger('pageSet'); // reset to page 1 & update display
            ,
            onAfter: function () 
                $table.trigger('update.pager');
            
        );
    );

    (function(b,k,q,r)b.fn.quicksearch=function(l,p)var m,n,h,e,f="",g=this,a=b.extend(delay:100,selector:null,stripeRows:null,loader:null,noResults:"",matchedResultsCount:0,bind:"keyup",onBefore:function(),onAfter:function(),show:function()this.style.display="",hide:function()this.style.display="none",prepareQuery:function(a)return a.toLowerCase().split(" "),testQuery:function(a,b,d)for(d=0;d<a.length;d+=1)if(-1===b.indexOf(a[d]))return!1;return!0,p);this.go=function()for(var c=0,b=
            0,d=!0,e=a.prepareQuery(f),g=0===f.replace(" ","").length,c=0,k=h.length;c<k;c++)g||a.testQuery(e,n[c],h[c])?(a.show.apply(h[c]),d=!1,b++):a.hide.apply(h[c]);d?this.results(!1):(this.results(!0),this.stripe());this.matchedResultsCount=b;this.loader(!1);a.onAfter();return this;this.search=function(a)f=a;g.trigger();this.currentMatchedResults=function()return this.matchedResultsCount;this.stripe=function()if("object"===typeof a.stripeRows&&null!==a.stripeRows)var c=a.stripeRows.join(" "),f=a.stripeRows.length;
        e.not(":hidden").each(function(d)b(this).removeClass(c).addClass(a.stripeRows[d%f]))return this;this.strip_html=function(a)a=a.replace(RegExp("<[^<]+>","g"),"");return a=b.trim(a.toLowerCase());this.results=function(c)"string"===typeof a.noResults&&""!==a.noResults&&(c?b(a.noResults).hide():b(a.noResults).show());return this;this.loader=function(c)"string"===typeof a.loader&&""!==a.loader&&(c?b(a.loader).show():b(a.loader).hide());return this;this.cache=function()e=b(l);"string"===typeof a.noResults&&
            ""!==a.noResults&&(e=e.not(a.noResults));n=("string"===typeof a.selector?e.find(a.selector):b(l).not(a.noResults)).map(function()return g.strip_html(this.innerHTML));h=e.map(function()return this);f=f||this.val()||"";return this.go();this.trigger=function()this.loader(!0);a.onBefore();k.clearTimeout(m);m=k.setTimeout(function()g.go(),a.delay);return this;this.cache();this.results(!0);this.stripe();this.loader(!1);return this.each(function()b(this).on(a.bind,function()f=b(this).val();g.trigger())))(jQuery,
                    this,document);

以下html：

<form>
    <div>
        <input id="search" type="search" placeholder="Search" />
    </div>
</form>
<div class="table-pager">Show
    <select class="pagesize">
        <option selected="selected" value="5">5</option>
        <option value="10">10</option>
    </select>entries | <span class="pagedisplay"></span> |
    <button type="button" class="btn prev">&larr;</button>
    <button type="button" class="btn next">&rarr;</button>
</div>
<table id="myTable">
    <thead>
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>abc 123</td>
        <td>10</td>
        <td>Koala</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>abc 1</td>
        <td>234</td>
        <td>Ox</td>
        <td>http://www.yahoo.com</td>
    </tr>
    <tr>
        <td>abc 9</td>
        <td>10</td>
        <td>Girafee</td>
        <td>http://www.facebook.com</td>
    </tr>
    <tr>
        <td>zyx 24</td>
        <td>767</td>
        <td>Bison</td>
        <td>http://www.whitehouse.gov/</td>
    </tr>
    <tr>
        <td>abc 11</td>
        <td>3</td>
        <td>Chimp</td>
        <td>http://www.ucla.edu/</td>
    </tr>
    <tr>
        <td>abc 2</td>
        <td>56</td>
        <td>Elephant</td>
        <td>http://www.wikipedia.org/</td>
    </tr>
    <tr>
        <td>abc 9</td>
        <td>155</td>
        <td>Lion</td>
        <td>http://www.nytimes.com/</td>
    </tr>
    <tr>
        <td>ABC 10</td>
        <td>87</td>
        <td>Zebra</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>zyx 1</td>
        <td>999</td>
        <td>Koala</td>
        <td>http://www.mit.edu/</td>
    </tr>
    <tr>
        <td>zyx 12</td>
        <td>0</td>
        <td>Llama</td>
        <td>http://www.nasa.gov/</td>
    </tr>
    <tr>
        <td>abc 111</td>
        <td>10</td>
        <td>Koala</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>abc 1</td>
        <td>234</td>
        <td>Ox</td>
        <td>http://www.yahoo.com</td>
    </tr>
    <tr>
        <td>abc 9</td>
        <td>10</td>
        <td>Girafee</td>
        <td>http://www.facebook.com</td>
    </tr>
    <tr>
        <td>zyx 24</td>
        <td>767</td>
        <td>Bison</td>
        <td>http://www.whitehouse.gov/</td>
    </tr>
    <tr>
        <td>abc 11</td>
        <td>3</td>
        <td>Chimp</td>
        <td>http://www.ucla.edu/</td>
    </tr>
    <tr>
        <td>abc 2</td>
        <td>56</td>
        <td>Elephant</td>
        <td>http://www.wikipedia.org/</td>
    </tr>
    <tr>
        <td>abc 9</td>
        <td>155</td>
        <td>Lion</td>
        <td>http://www.nytimes.com/</td>
    </tr>
    <tr>
        <td>ABC 10</td>
        <td>87</td>
        <td>Zebra</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>zyx 1</td>
        <td>999</td>
        <td>Koala</td>
        <td>http://www.mit.edu/</td>
    </tr>
    <tr>
        <td>zyx 12</td>
        <td>0</td>
        <td>Llama</td>
        <td>http://www.nasa.gov/</td>
    </tr>
    <tr>
        <td>abc 222</td>
        <td>10</td>
        <td>Koala</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>abc 1</td>
        <td>234</td>
        <td>Ox</td>
        <td>http://www.yahoo.com</td>
    </tr>
    <tr>
        <td>abc 9</td>
        <td>10</td>
        <td>Girafee</td>
        <td>http://www.facebook.com</td>
    </tr>
    <tr>
        <td>zyx 24</td>
        <td>767</td>
        <td>Bison</td>
        <td>http://www.whitehouse.gov/</td>
    </tr>
    <tr>
        <td>abc 11</td>
        <td>3</td>
        <td>Chimp</td>
        <td>http://www.ucla.edu/</td>
    </tr>
    <tr>
        <td>abc 2</td>
        <td>56</td>
        <td>Elephant</td>
        <td>http://www.wikipedia.org/</td>
    </tr>
    <tr>
        <td>abc 9</td>
        <td>155</td>
        <td>Lion</td>
        <td>http://www.nytimes.com/</td>
    </tr>
    <tr>
        <td>ABC 10</td>
        <td>87</td>
        <td>Zebra</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td>zyx 1</td>
        <td>999</td>
        <td>Koala</td>
        <td>http://www.mit.edu/</td>
    </tr>
    <tr>
        <td>zyx 12</td>
        <td>0</td>
        <td>Llama</td>
        <td>http://www.nasa.gov/</td>
    </tr>
    </tbody>
</table>

效果几乎很好。我只有一个问题。

当我点击X 重置过滤器时 - 没有任何反应。

期望的结果 - 过滤器应该重置并且表格应该更新。

我在删除搜索字段中的符号时也遇到了问题 - 表格不更新

如何解决这个问题？

【问题讨论】：

【参考方案1】：

quicksearch demo 似乎不再正常工作。

因此，您可以使用过滤器小部件来匹配所有列中的内容，而不是使用快速搜索插件：

<input class="search" type="search" data-column="all">

然后将该输入作为外部过滤器包含在内，并隐藏过滤器行

filter_external : '.search',
filter_columnFilters: false

做同样的事情，让输入中的“x”正常工作。

完整代码&demo:

$(function () 
    $table = $('#myTable')
        .tablesorter(
            theme: 'blue',
            widthFixed: true,
            headerTemplate: 'content icon',
            widgets: ['zebra', 'filter'],
            widgetOptions: 
                zebra: ["even", "odd"],
                filter_external: '.search',
                filter_columnFilters: false
            
        )
        .tablesorterPager(
            container: $(".table-pager"),
            output: 'page of filteredPages (filteredRows)',
            size: 5
        );
);

【讨论】：

【参考方案2】：

已经尝试在 head 部分添加所需的插件

<script src="https://my-script-hosting.googlecode.com/files/jquery.tablesorter.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.5/addons/pager/jquery.tablesorter.pager.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.5/addons/pager/jquery.tablesorter.pager.min.js"></script>

【讨论】：

以上是关于单击 X 时表格不会重置的主要内容，如果未能解决你的问题，请参考以下文章

在 TableViewCell 内单击时 UIButton 标签重置

DataTables DT：重置单击单元格的值

使用重置按钮重置表格

Swift - 表格视图单元格内的单击按钮不会在该单元格的功能处调用确实选择行

单击时将索引值重置为零

如何在单击父按钮单击时重置数据和子输入视图？