Datatables - 如何在URL中传递搜索参数

Question

我希望能够创建一个链接到包含数据表的页面，该链接可以在URL中传递搜索参数值。目标是在预过滤搜索值参数的情况下打开包含数据表的页面。

我已经设置了一个jsfiddle来使用一些示例数据。 http://jsfiddle.net/lbriquet/9CxYT/10/ 想法是在jsfiddle的URL中添加一个参数，以便页面将显示搜索输入值设置为“firefox”，例如，并且表格将过滤以仅显示搜索匹配项。

非常感谢您的任何帮助！

- lbriquet

Answer 1

这是一个老问题，但在搜索解决方案时仍然很高。以下是我为使其正常工作所做的操作。

$(document).ready( function() {
  
  // First, get the search parameter. Here I use example.com#search=yourkeyword
    var searchHash = location.hash.substr(1),
        searchString = searchHash.substr(searchHash.indexOf('search='))
                    .split('&')[0]
                    .split('=')[1];
  
  
  $('#example').dataTable( {
    "oSearch": { "sSearch": searchString }
  } );
} )

- wouter

Answer 2

您可以简单地编写一个函数读取您的URL变量，然后过滤表格。我想象一下，您将q = Firefox作为搜索参数传递。

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
 var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;

}

$(document).ready(function() {
    // Get the query from the url
    var query = getUrlVars()['q'];
    // create the table
    var oTable = $('#example').dataTable();
    // Filter it
    oTable.fnFilter( query, 2 );
});

在这里可以查看示例 http://fiddle.jshell.net/9CxYT/17/show/?q=Firefox

- Nicola Peluchetti

---

这听起来像是正确的解决方案...但我无法让它工作。这是我尝试集成您的代码的jsfiddle...也许我没有正确地处理它？它隐藏了所有条目。 http://jsfiddle.net/lbriquet/9CxYT/14/ - lbriquet

jsfiddle的设计框可以被视为一个独立的页面（不在iframe中）。要做到这一点，请在设计框中右键单击并选择“This frame”，然后选择“在新标签页中打开框架”。这将加载页面： http://fiddle.jshell.net/lbriquet/9CxYT/14/show/ 我尝试将“q”值添加到URL中，但它没有将我的值添加到搜索过滤器或显示具有该值的行。 http://fiddle.jshell.net/lbriquet/9CxYT/14/show/?q=firefox您能帮助我理解我做错了什么吗？ - lbriquet

@lbriquet不知道jsfiddle的那个功能。无论如何，它是getUrlVars函数出了问题，现在它可以工作了。我更新了我的答案。 - Nicola Peluchetti

将值传递到URL中非常有效！有没有办法让传递的值作为搜索字段中的值可见？想法是单击重置按钮会将表格重置以显示所有行。基本上，我希望URL将值传递到搜索字段，以便根据该值过滤表格。然后，重置按钮将从搜索字段中删除该值并显示完整的未过滤表格。 - lbriquet

Answer 3

我做的如下才让它起作用：

@Ibriquet的第一部分从url中获取GET参数，我没有改变那部分。可能有更好的方法来完成这个任务，但我没有研究。

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
 var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;

}

对于第二部分，我把这个内容包含在$('#tablename').DataTable( {中，在列设置之后。

      initComplete: function() {
        this.api().search(getUrlVars()['search']).draw();        
      },

这将把位于?search=和任何&之后的内容放入您的URL中的搜索字段中。

- Michael Paul

---

它可以工作，但我必须在this.api().search(getUrlVars()['search']).draw()之前添加这个验证if (typeof getUrlVars()['search'] !== 'undefined')。否则，它会在控制台中生成警告。 - Luis Rodriguez

我还必须添加decodeURI：this.api().search(decodeURI(getUrlVars()['search'])).draw(); 以解码URL中的百分号编码字符串。 - Luis Rodriguez