数据表 - 数据表外的搜索框

时间:2011-05-13 10:10:49

标签: jquery search datatables filtering

我正在使用DataTables(datatables.net),我希望我的搜索框在表格之外(例如在我的标题div中)。

这可能吗?

11 个答案:

答案 0 :(得分:194)

您可以使用DataTables api过滤表格。所以你需要的只是你自己的输入字段,其中一个keyup事件触发了DataTables的过滤功能。使用css或jquery,您可以隐藏/删除现有的搜索输入字段。或者DataTables可能有删除/不包含它的设置。

在此处查看Datatables API文档。

示例:

HTML

<input type="text" id="myInputTextField">

JS

oTable = $('#myTable').DataTable();   //pay attention to capital D, which is mandatory to retrieve "api" datatables' object, as @Lionel said
$('#myInputTextField').keyup(function(){
      oTable.search($(this).val()).draw() ;
})

答案 1 :(得分:31)

根据@lvkz评论:

如果你使用带有大写d .DataTable()的数据表(这将返回一个Datatable API对象),请使用:

 oTable.search($(this).val()).draw() ;

这是@netbrain的答案。

如果你使用小写d .dataTable()的数据表(这将返回一个jquery对象),请使用:

 oTable.fnFilter($(this).val());

答案 2 :(得分:14)

您可以使用sDom选项。

默认情况下,搜索输入位于自己的div中:

sDom: '<"search-box"r>lftip'

如果您使用jQuery UI bjQueryUI设置为true):

sDom: '<"search-box"r><"H"lf>t<"F"ip>'

以上内容会将搜索/过滤input元素放入其自己的div中,并使用名为search-box的类在实际表格之外。

即使它使用了特殊的简写语法,它实际上也可以使用你抛出的任何HTML。

答案 3 :(得分:8)

这个帮助我获得DataTables版本1.10.4,因为它的新API

var oTable = $('#myTable').DataTable();    
$('#myInputTextField').keyup(function(){
   oTable.search( $(this).val() ).draw();
})

答案 4 :(得分:6)

更新版本的语法不同:

var table = $('#example').DataTable();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

请注意,此示例使用在首次初始化数据表时分配的变量table。如果您没有此变量,只需使用:

var table = $('#example').dataTable().api();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

自:DataTables 1.10

- 资料来源:https://datatables.net/reference/api/search()

答案 5 :(得分:4)

这应该对你有用:(DataTables 1.10.7)

oTable = $('#myTable').dataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.api().search($(this).val()).draw();
})

oTable = $('#myTable').DataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.search($(this).val()).draw();
})

答案 6 :(得分:3)

我遇到了同样的问题。

我尝试了所有替代方案,但没有工作,我使用的方法不对,但效果很好。

搜索输入示例

<input id="serachInput" type="text"> 

jquery代码

$('#listingData').dataTable({
  responsive: true,
  "bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input

$("#serachInput").on("input", function (e) {
   e.preventDefault();
   $('#listingData').DataTable().search($(this).val()).draw();
});

答案 7 :(得分:3)

如果您使用服务器端处理,我想再向@netbrain's answer添加一些内容(请参阅serverSide选项)。

默认情况下由数据表执行的查询限制(请参阅searchDelay选项)不适用于.search() API调用。您可以通过以下方式使用$.fn.dataTable.util.throttle()来取回它:

var table = $('#myTable').DataTable();
var search = $.fn.dataTable.util.throttle(
    function(val) {
        table.search(val).draw();
    },
    400  // Search delay in ms
);

$('#mySearchBox').keyup(function() {
    search(this.value);
});

答案 8 :(得分:1)

使用fnDrawCallback函数绘制表格时,可以移动div。

    $("#myTable").dataTable({
    "fnDrawCallback": function (oSettings) {
        $(".dataTables_filter").each(function () {
            $(this).appendTo($(this).parent().siblings(".panel-body"));
        });
    }
});

答案 9 :(得分:1)

$('#example').DataTable({
   "bProcessing": true,
   "bServerSide": true,
   "sAjaxSource": "../admin/ajax/loadtransajax.php",
   "fnServerParams": function (aoData) {
        // Initialize your variables here
        // I have assign the textbox value for "text_min_val"
        var min_val = $("#min").val();  //push to the aoData
        aoData.push({name: "text_min_val", value:min_val});
   },
   "fnCreatedRow": function (nRow, aData, iDataIndex) {
       $(nRow).attr('id', 'tr_' + aData[0]);
       $(nRow).attr('name', 'tr_' + aData[0]);
       $(nRow).attr('min', 'tr_' + aData[0]); 
       $(nRow).attr('max', 'tr_' + aData[0]); 
   }
});

loadtransajax.php中,您可能会收到获取值:

if ($_GET['text_min_val']){
    $sWhere = "WHERE ("; 
    $sWhere .= " t_group_no LIKE '%" . mysql_real_escape_string($_GET['text_min_val']) . "%' ";
    $sWhere .= ')';
}

答案 10 :(得分:0)

如果您正在使用JQuery dataTable,则只需添加"bFilter":true即可。这将在表外显示默认搜索框,并且其动态工作...按预期

$("#archivedAssignments").dataTable({
                "sPaginationType": "full_numbers",
                "bFilter":true,
                "sPageFirst": false,
                "sPageLast": false,
                "oLanguage": {
                "oPaginate": {
                    "sPrevious": "<< previous",
                    "sNext" : "Next >>",
                    "sFirst": "<<",
                    "sLast": ">>"
                    }
                },
            "bJQueryUI": false,
            "bLengthChange": false,
            "bInfo":false,
            "bSortable":true
        });