过滤PrimeUI数据表

时间:2013-08-27 07:17:32

标签: javascript html angularjs primefaces filtering

有谁知道如何过滤PrimeUI数据?我正在使用角度和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"/> 

2 个答案:

答案 0 :(得分:0)

截至目前,PrimeUI Datatable无法进行过滤。在页面的任何地方都没有提到它。我建议你考虑其他 - options

答案 1 :(得分:0)

由于不支持过滤Prime UI数据表,但仍然可以从服务器端过滤数据表,就像我已经使用自定义搜索实现了素数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);  
                }  
            });  
        }           ,
    });  
};