数据表在网址中传递搜索参数,以便我可以通过电子邮件发送链接

时间:2016-05-30 02:30:41

标签: ajax datatable datatables datatables-1.10

我已经进行了非常广泛的搜索,试图找到一种方法,可以通过数据表发送带有自定义搜索参数的链接但无法找到任何内容。我正在使用multifilter - https://datatables.net/examples/api/multi_filter.html

我想要的是,如果用户搜索特定的名字,该搜索将附加到URL,以便用户可以通过电子邮件发送指向他正在寻找的特定结果集的链接。

You can see in the image below an example.

2 个答案:

答案 0 :(得分:1)

我删除了之前关于使用keepConditions的建议,因为它在您的用例中没有用(我测试过)但它让我思考并且我想出了这个:

$('#example tfoot th').each(function(k, v){
    var title = $(this).text();
    $(this).html('<input type="text" data-position="'+k+'" placeholder="Search ' + title + '" />');
});    
var example = $("#example").DataTable();
example.columns().every(function(){
    var that = this;
    $('input', this.footer()).on('keyup change', function(){
        var hash = [];
        $('#example tfoot th').each(function(k, v){
            if(~~$(v).find("input").val().length){
                hash.push($(v).find("input").data("position") + "=" + encodeURIComponent($(v).find("input").val()));
            }
        });
        window.location.hash = hash.join("&");
        if(that.search() !== this.value){
            that.search(this.value).draw();
        }
    });
});
if(window.location.hash) {
    var hash = window.location.hash.substring(1).split("&");
    $.each(hash, function(k, v){
        $("#example tfoot th input:eq("+v.split("=")[0]+")").val(decodeURIComponent(v.split("=")[1])).trigger("change");
    });
}

基本上每次输入搜索词时,我们迭代所有输入并用结果更新url哈希,然后我们确保听到是否有哈希并反过来。这是一个有效的example

希望有所帮助。

答案 1 :(得分:0)

所以你想要的是用户可以复制所有搜索过滤器和电子邮件。 这种方法怎么样? -

  1. 正确的JS构建URL。在所有搜索框的onblur上调用它。
  2. 构建的URL将在文本框中保持更新(可以是只读或隐藏)
  3. 为用户提供一个按钮&#34;复制搜索参数&#34;将URL文本框的内容复制到剪贴板
  4. 用户可以粘贴并通过电子邮件发送复制的URL。
  5. 这样我们就不会搞砸实际的当前网址。

    请参阅this复制到剪贴板。