url - 数据表 - 如何在 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

您可以简单地拥有一个读取您的 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

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= 之后和任何 & 之前的任何内容放入搜索字段中。