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

Question

我希望能够链接到带有数据表的页面，该数据表将在 url 中传递搜索参数值。目标是使用搜索值参数对打开的数据表页面进行预过滤。

我已经设置了一个 jsfiddle 来处理一些示例数据。
http://jsfiddle.net/lbriquet/9CxYT/10/

这个想法是向 jsfiddle url 添加一个参数，以便页面显示时将搜索输入值设置为“firefox”，例如，并且过滤表以仅显示搜索匹配项。

任何帮助将不胜感激！

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 }
  } );
} )

Answer 2

您可以简单地有一个函数来读取您的URLvar，然后过滤表。我想你通过 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

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( { here, right after the column setup }

中

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

这会将网址中 ?search= 之后和任何 & 之前的任何内容放入搜索字段。