vedmack / yadcf

Yet Another DataTables Column Filter (yadcf)
http://yadcf-showcase.appspot.com/
MIT License
732 stars 285 forks source link

input search delay #643

Closed Alexisback closed 3 years ago

Alexisback commented 3 years ago

Hello everyone I recently discovered this script, really great

I created a page to filter the data of my database, let's say that the work is almost finished, but there is a problem with the default search (the one on the right) where you enter the text to be filtered.

sshot-2

When I type a sentence, typing is interrupted for a couple of seconds because each word is processed and filtered, question: Is it possible to delay the wait between typing and the result of the data?

I entered this but not much has changed

"searchDelay": 900000,

code

<script>
$(document).ready(function(){

    'use strict'; // start DOM

 oTable = $('#example').dataTable(

  {
        "retrieve": true,
        "paging":   true,  // Table pagination
        "order": [[ 1, "asc" ]],  // Column ordering 
        "info":     true,  // Bottom left status text
        "bAutoWidth":     true,  // Bottom left status text
        "bJQueryUI": true,
        "searchDelay": 900000,
        "sDom": "lfirtip" ,// info bottom and above
        "aoColumnDefs": [{ "bSearchable": true, "bVisible": false, "aTargets": [ 10 ] },] // hide column but filter enable

  }// end DOM
  // start column
  ).yadcf([
        {column_number : 1, column_data_type: "html", html_data_type: "text", filter_default_label: "Select Actor"},
        {column_number : 2, filter_type: "auto_complete", text_data_delimiter: "-", filter_default_label: "select Year"},
        {column_number : 3, filter_type: "range_number", data: ["0", "100"],filter_delay: "500", filter_container_id: "external_filter_container1"},
        {column_number : 4, data: ["Active", "Retired" , "Dead"],  filter_default_label: "Select Status"},
        {column_number : 5, html_data_type: "text",text_data_delimiter: ",", filter_match_mode : "exact", filter_container_id: "external_filter_container3"},
        {column_number : 6, column_data_type: "html", text_data_delimiter: " ", filter_default_label: "Select start"},
        {column_number : 7, column_data_type: "html", html_data_type: "text", filter_container_id: "external_filter_container5", filter_default_label: "select"},
        {column_number : 8, column_data_type: "html", text_data_delimiter: ",", filter_default_label: "select", filter_container_id: "external_filter_container2"},
        {column_number : 9, data: ["Yes", "No"],  filter_default_label: "Select Yes/No" , filter_container_id: "external_filter_container4"}

        ]);
        SyntaxHighlighter.all();
});
</script>

Thanks

vedmack commented 3 years ago

Hi,

yadcf can't affect/control the global filter of the table, that filter is part of the datatables library.

Alexisback commented 3 years ago

Hi vedmack and how do i solve? do you know some method to apply to my code

vedmack commented 3 years ago

@Alexisback , not sure, but you can look at these https://datatables.net/forums/discussion/23960/delay-between-typing-and-searching https://datatables.net/reference/option/searchDelay

Alexisback commented 3 years ago

tried, but I haven't solved it

"searchDelay": 900000,

Alexisback commented 3 years ago

i found this plugin,

https://datatables.net/plug-ins/api/fnSetFilteringDelay

but after putting it in the code it interferes with filters solution? maybe I entered the code wrong?

<script type="text/javascript" src="fnSetFilteringDelay.js"></script>

<script>
$(document).ready(function(){

    'use strict'; // start DOM

 oTable = $('#example').dataTable().fnSetFilteringDelay(1000)(

  {
        "retrieve": true,
        "paging":   true,  // Table pagination
        "order": [[ 1, "asc" ]],  // Column ordering
        "info":     true,  // Bottom left status text

        "bAutoWidth":     true,  // Bottom left status text
        "bJQueryUI": true,
        "searchDelay": 900000,
        "sDom": '<"H"lfir>t<"F"ip>' ,// info bottom and above
        "aoColumnDefs": [{ "bSearchable": true, "bVisible": false, "aTargets": [ 10 ] },] // hide column but filter enable

  }// end DOM
  // start column
  ).yadcf([
        {column_number : 1, column_data_type: "html", html_data_type: "text", filter_default_label: "Select Actor"},
        {column_number : 2, filter_type: "auto_complete", text_data_delimiter: "-", filter_default_label: "select Year"},
        {column_number : 3, filter_type: "range_number", data: ["0", "100"],filter_delay: "500", filter_container_id: "external_filter_container1"},
        {column_number : 4, data: ["Active", "Retired" , "Dead"],  filter_default_label: "Select Status"},
        {column_number : 5, html_data_type: "text",text_data_delimiter: ",", filter_match_mode : "exact", filter_container_id: "external_filter_container3"},
        {column_number : 6, column_data_type: "html", text_data_delimiter: " ", filter_default_label: "Select start"},
        {column_number : 7, column_data_type: "html", html_data_type: "text", filter_container_id: "external_filter_container5", filter_default_label: "select"},
        {column_number : 8, column_data_type: "html", text_data_delimiter: ",", filter_default_label: "select", filter_container_id: "external_filter_container2"},
        {column_number : 9, data: ["Yes", "No"],  filter_default_label: "Select Yes/No" , filter_container_id: "external_filter_container4"}

        ]);
        SyntaxHighlighter.all();
});