过滤 PrimevUE 数据表答案

【问题标题】：filering PrimeUI datatable过滤 PrimevUE 数据表
【发布时间】：2013-08-29 20:06:06
【问题描述】：

有谁知道如何过滤 PrimeUI 数据表？我正在使用 angular 和 PrimeUI，在 html 中我有一个文本字段，根据它我想过滤我的数据表

$('#table').puidatatable({
        caption: 'my tbl',
        paginator: {
            rows: 9
        },
        columns: [
            {field:'name', headerText: 'name', sortable:true} ,
            {field:'age', headerText: 'age', sortable:true},
             {field:'id', headerText: 'ID', sortable:true}
        ],
        datasource: myarray         
        ,
        selectionMode: 'single',
        rowSelect: function(event, data) {
            some code            
        }});
    $('#messages').puigrowl();

在我的 html 中：

  <input id="basic" name="basic" type="text"/>

【问题讨论】：

标签： javascript html angularjs primefaces filtering

【解决方案1】：

截至目前，PrimeUI Datatable 上的过滤功能不可用。页面上的任何地方都没有提到它。我建议你考虑其他 - options。

【讨论】：

它将在 2.1 版本中提供。
@CagatayCivici 2.1 已发布，但该功能尚不可用。也许在 2.2 中？

【解决方案2】：

由于不支持过滤 Prime UI 数据表，但您仍然可以从服务器端过滤数据表，就像我已经使用自定义搜索实现了 Prime UI 数据表一样。我从搜索字段中发送一个参数，如果该参数为空我返回所有数据如果搜索字段包含一些数据我返回过滤后的数据虽然这我实现了过滤功能

<!--input filed for search -->
   <input type="text" name ="abc" id="input-filter" onkeypress="javascript:gridSearch();"/>

function searchToJSON(){
    return JSON.stringify({
        "input-filter": document.getElementById('input-filter').value,
        });
}


gridSearch = function() {      
       var searchUrl= 'searchUrl';
       $('#table').puidatatable({  
       lazy: true,
        paginator: {  
            rows: 5  
        },  
        columns: [
            {field:'abc', headerText: 'abc', sortable:true},
            {field:'xyz', headerText: 'xyz', sortable:true}
        ],  
        datasource: function(callback) {  
            $.ajax({  
                type: "POST",  
                url: searchUrl, 
                datatype : "application/json",
                contentType: "application/json",
                data:searchToJSON(), // supply json fields and return filtered data from server accoring to your requirements
                context: this,  
                success: function(response) { 
                    callback.call(this, response.data);  
                }  
            });  
        }           ,
    });  
};

【讨论】：