Datatables - ช่องค้นหาภายนอก datatable

ฉันใช้ DataTables ( datatables.net ) และฉันต้องการให้ช่องค้นหาของฉันอยู่นอกตาราง (ตัวอย่างเช่นในส่วนหัวของฉัน)

เป็นไปได้หรือไม่

คุณสามารถใช้ DataTables api เพื่อกรองตาราง ดังนั้นสิ่งที่คุณต้องมีคือช่องป้อนข้อมูลของคุณเองพร้อมด้วยเหตุการณ์การกดปุ่มที่เรียกฟังก์ชันตัวกรองไปยัง 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() ;
})

ตามความคิดเห็น @lvkz:

หากคุณใช้ datatable กับตัวพิมพ์ใหญ่ d .DataTable()(สิ่งนี้จะส่งคืนอ็อบเจ็กต์ Datatable API) ให้ใช้สิ่งนี้:

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

ซึ่งเป็นคำตอบ @netbrain

หากคุณใช้ datatable กับตัวพิมพ์เล็ก d .dataTable()(สิ่งนี้จะส่งคืนวัตถุ jquery) ให้ใช้สิ่งนี้:

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

คุณสามารถใช้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 ใด ๆ ที่คุณโยนไปได้

สิ่งนี้ช่วยฉันสำหรับ DataTables เวอร์ชัน 1.10.4 เนื่องจาก API ใหม่

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

เวอร์ชันล่าสุดมีไวยากรณ์ที่แตกต่างกัน:

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.2

- ที่มา: https://datatables.net/reference/api/search ()

สิ่งนี้น่าจะเหมาะกับคุณ: (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();
})

ผมมีปัญหาเหมือนกัน.

ฉันลองใช้ทางเลือกอื่นที่โพสต์แล้ว แต่ไม่ได้ผลฉันใช้วิธีที่ไม่ถูกต้อง แต่ทำงานได้อย่างสมบูรณ์

ตัวอย่างการป้อนข้อมูลการค้นหา

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

ฉันต้องการเพิ่มอีกสิ่งหนึ่งในคำตอบของ @ netbrain ที่เกี่ยวข้องในกรณีที่คุณใช้การประมวลผลฝั่งเซิร์ฟเวอร์ (ดูที่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);
});

คุณสามารถย้าย div เมื่อวาดตารางโดยใช้fnDrawCallbackฟังก์ชัน

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

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

หากคุณใช้ 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
        });