2015-04-28 183 views
0

我的dataTable版本是1.10.4。 我通过传递Javascript源数据填充数据表从JavaScript获取过滤的数据数据源数据表

var dataSet = [ 
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'], 
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'] 
     ---- 
];  ---- 


    $(document).ready(function() { 
     $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>'); 

$('#example').dataTable({ 
    "data": dataSet, 
    "columns": [ 
     { "title": "Engine" }, 
     { "title": "Browser" }, 
     { "title": "Platform" }, 
     { "title": "Version", "class": "center" }, 
     { "title": "Grade", "class": "center" } 
    ] 
}); 

});

现在我有一个搜索输入来根据输入过滤表格。 我试图获取表格中返回并呈现的过滤数据。

例如,如果用户搜索输入为 'C' 然后我应该得到滤波的数据

var数据= [ [ '三叉戟', '的Internet Explorer 5.0', '运95 +','5 ','C'] ];

是否有任何标准的方式获取数据表中的过滤数据?

如果不是我想关键的阵列高达

$("#searchInput").on('keyup change', function() { 
        // get the filtered JavaScript data 
       }); 

请参考JSFIDDLE HERE

回答

0

这是给你一个例子搜索; 您可以删除按钮并将onchange添加到您的区域。

Search <input type="text" id="searchText"> 
<input type = "button" onClick="searchAndUpdate()"> 

这是函数;

 function searchAndUpdate(){ 
     var searchText = $('#searchText').val(); 
     var resultTable = []; 
     dataSet.forEach(function(element) { 
      var objString = JSON.stringify(element); 
      if(objString.indexOf(searchText)!=-1){ 
       resultTable.push(element); 
      } 
     }); 
     console.log(resultTable); 

     //update your table 
    } 

注意:你必须更新表格。 Here EXAMPLE.

2

可以使用search.dt事件为这个(这里假设你已经存储在table变量DataTable的实例):

$("#example").on('search.dt', function() { 
    var filteredRows = table 
         .api() 
         .rows({order:'index', search:'applied'}) 
         .data(); 

    for (var i=0; i<filteredRows.length; i++) { 
     console.log(filteredRows[i]); 
    };  
});   

这将呼应所有的过滤行从控制台中相同的顺序,因为他们在你的dataSet对象声明:

["Gecko", "Firefox 3.0", "Win 2k+/OSX.3+", "1.9", "A"] 
["Gecko", "Camino 1.0", "OSX.2+", "1.8", "A"] 
["Gecko", "Camino 1.5", "OSX.3+", "1.8", "A"] 
["Gecko", "Netscape 7.2", "Win 95+/Mac OS 8.6-9.2", "1.7", "A"] 

注意,如果你instantiat e与DataTable()而不是dataTable()您的表,您将不需要0​​参考。

叉小提琴 - >http://jsfiddle.net/fpbokb68/


看到https://datatables.net/reference/type/selector-modifier用不同的方式来提取行了一个数据表实例的实例。