jquery title修改




數據表-數據表外部的搜索框 (8)

我使用DataTables( datatables.net ),我希望我的搜索框位於表格之外(例如在我的標題div中)。

這可能嗎 ?


你可以使用sDom選項。

默認搜索輸入在它自己的div中:

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

如果你使用jQuery UIbjQueryUI設置為true ):

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

上面的代碼將搜索/過濾input元素放到它自己的div search-box ,並且在實際表格外部有一個名為search-box的類。

儘管它使用了特殊的簡寫語法,但它實際上可以使用任何HTML。


如果你正在使用JQuery數據表,所以你只需要添加"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
        });    

您可以使用DataTables api來過濾表格。 所以你所需要的只是你自己的輸入字段和一個觸發DataTables的過濾函數的keyup事件。 使用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() ;
})

我有同樣的問題。

我嘗試了所有備選方案,但沒有工作,我使用了一種不正確的方式,但它工作得很完美。

示例搜索輸入

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

根據@lvkz評論:

如果您使用大寫字母d .DataTable()的數據表(這將返回一個Datatable API對象),請使用以下命令:

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

這是@netbrain的答案。

如果你使用小寫d .dataTable() (這將返回一個jQuery對象)使用這個:

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

當使用fnDrawCallback函數繪製表格時,您可以移動div。

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

這應該適合你:(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();
})

$('#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 .= ')';
}




filtering