自动完成数据表

Question

我在 codeigniter 框架 中工作。我使用数据表进行排序、过滤、分页等。为此，在我的视图页面中，我有

    table class="table table-bordered datatable" id="table_export"

和剧本

jQuery(document).ready(function($)
{


    var datatable = $("#table_export").dataTable({
        "sPaginationType": "bootstrap",

通过这一行，我得到了搜索及其样式。但问题是我想为搜索按钮实现自动完成。是否有任何选项可以在数据表中实现自动完成？因为我觉得很难编辑数据表的jquery。

有什么建议吗？提前致谢。

Answer 1

我不确定，这是否是您想要的，只是一个示例，说明如何在 datatable.just 中使用自动完成设置 enable_auto_complete：相关列中的 true（在下面的代码中 column_number : 3):

$(document).ready(function(){
  $('#example').dataTable().yadcf([
  {column_number : 0},
  {column_number : 1, filter_container_id: "external_filter_container"},
  {column_number : 2, data:["Yes","No"], filter_default_label: "Select Yes/No"},
  {column_number : 3, text_data_delimiter: ",", enable_auto_complete: true},
  {column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);
});

或类似的东西....

<script>
 $("#autocompleteTable").dataTable({
  aaData : [],
  bLengthChange : false,
  bPaginate : false,
  bInfo : false,
  bFilter : false,
  aoColumns : [ {
    mDataProp : 'firstName',
    sTitle : 'First Name'
 }, {
    mDataProp : 'lastName',
    sTitle : 'Last Name'
 }, {
    mDataProp : 'address',
    sTitle : 'Address'
 } ]
});
</script>

查看以上代码详情 ->https://caffeinatedcoding.wordpress.com/2011/09/28/roll-your-own-autocomplete-table-with-jquery-and-datatables/

Answer 2

您可以使用下面的代码添加自动完成功能，以使用适用于 Bootstrap 的 typeahead.js 库搜索 jQuery DataTables 的输入框 3.

$(document).ready(function() {
   var dataSrc = [];

   var table = $('#example').DataTable({
      'initComplete': function(){
         var api = this.api();

         // Populate a dataset for autocomplete functionality
         // using data from first, second and third columns
         api.cells('tr', [0, 1, 2]).every(function(){
            var data = this.data();
            if(dataSrc.indexOf(data) === -1){ dataSrc.push(data); }
         });

         // Initialize Typeahead plug-in
         $('.dataTables_filter input[type="search"]', api.table().container())
            .typeahead({
               source: dataSrc,
               afterSelect: function(value){
                  api.search(value).draw();
               }
            }
         );
      }
   });
});

有关详细信息和演示，请参阅 jQuery DataTables: Search input with autocomplete using Typeahead and Bootstrap。

自动完成数据表

autocomplete with datatables

datatable

jquery

autocomplete