如何通过单击“清除”按钮清除过滤器后刷新数据表按钮

发布于 2025-01-08 06:21:37 字数 1231 浏览 1 评论 0原文

我已将 dataTables 过滤器输入修改为 Jquery Mobile 搜索过滤器，其中还包括一个删除按钮，用于清除输入字段。

这只能起到一半作用，因为当我单击删除时，输入字段会被清除，但表格不会更新。

因此，我正在寻找一些有关如何在单击 _fnFeatureHtmlFilter 函数内的自定义删除按钮时刷新表格的提示？

下面的代码显示了我如何设置 JQM 搜索。不过，我认为这对回答问题没有帮助...

    /* jqm search input */
    sSearchStr = oSettings.oInit.bJQueryMobileUI == true ? '<input placeholder="Filtern" data-type="search" data-theme="'+DataTable.ext.oJQMthemes.wrapperTheme+'" />' : 
         ( (sSearchStr.indexOf('_INPUT_') !== -1) ?
             sSearchStr.replace('_INPUT_', '<input type="text" />') :
                sSearchStr==="" ? '<input type="text" />' : sSearchStr+' <input type="text" />' );
    var nFilter = document.createElement( 'div' );
    /* jqm wrapper classes */
    nFilter.className = oSettings.oInit.bJQueryMobileUI == true ? "ui-block-c "+oSettings.oClasses.sFilter : oSettings.oClasses.sFilter;
    oSettings.oInit.bJQueryMobileUI == true ? $(nFilter).html(sSearchStr) : $(nFilter).html('<label>'+sSearchStr+'</label>');

感谢您的一些提示！

原文

I have modified the dataTables filter input into a Jquery Mobile search filter, which also inlcudes a delete button, to clear the input field.

This only works half-way, because when I click delete, the input field clears BUT the tables does not update.

So I'm looking for some hints on how to refresh the table when clicking on my custom delete button inside the _fnFeatureHtmlFilter function?

The below code shows how I set up the JQM search. Don't think it's helpful for answering the question though...

    /* jqm search input */
    sSearchStr = oSettings.oInit.bJQueryMobileUI == true ? '<input placeholder="Filtern" data-type="search" data-theme="'+DataTable.ext.oJQMthemes.wrapperTheme+'" />' : 
         ( (sSearchStr.indexOf('_INPUT_') !== -1) ?
             sSearchStr.replace('_INPUT_', '<input type="text" />') :
                sSearchStr==="" ? '<input type="text" />' : sSearchStr+' <input type="text" />' );
    var nFilter = document.createElement( 'div' );
    /* jqm wrapper classes */
    nFilter.className = oSettings.oInit.bJQueryMobileUI == true ? "ui-block-c "+oSettings.oClasses.sFilter : oSettings.oClasses.sFilter;
    oSettings.oInit.bJQueryMobileUI == true ? $(nFilter).html(sSearchStr) : $(nFilter).html('<label>'+sSearchStr+'</label>');

Thanks for some tips!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

潇烟暮雨 2025-01-15 06:21:37

找到了解决方案：

 $('.dataTables_filter .ui-input-clear').live('click', function(e) {    
      jqFilter.val("");
      jqFilter.trigger('keyup.DT');
      });

这绑定到清除按钮。因此，当单击它时，我手动将输入值设置为“”，因为 JQM 清除按钮似乎并没有真正清除输入本身。

通过清除输入，我触发了输入上的按键操作。这将触发正常的 dataTables 例程，从而触发 fnFilter 函数，因为现在 jqFilter.value 与之前的搜索词不匹配。因为jqFilter为空fnFilter将再次显示整个表格。

也许对其他人也有用。

Found a solution:

 $('.dataTables_filter .ui-input-clear').live('click', function(e) {    
      jqFilter.val("");
      jqFilter.trigger('keyup.DT');
      });

This binds to the clear button. So when it's clicked I'm setting the input value to "" manually, because the JQM clear button doesn't seem to really clear the input itself.

With my cleared input I trigger a keyup on the input. This will fire the normal dataTables rountine, which will fire the fnFilter function, because now jqFilter.value does not match the previous search term. Because jqFilter is empty fnFilter will show the whole table again.

Maybe useful for somebody else, too.

回复收藏 0 原文