I found a reference on how to build a spreadsheet like table in VF page . Here is the link: https://developer.salesforce.com/page/Making_A_Spreadsheet_On_Force.com (https://developer.salesforce.com/page/Making_A_Spreadsheet_On_Force.com" target="_blank)
It uses ParamQuery (http://paramquery.com/grid" target="_blank) . 
My problem is when i filter some data, the paging function went wrong.
Any sugestions on how to solve this problem?

Here is the code:
<script>
        var myGridData = [];    
        var myGrid = {};
        var $myGrid;
        
        $(function(){              
            //Create Grid Table                           
            myGrid.title = "MER List";         
            myGrid.width = 900;
            myGrid.height = 600;
            myGrid.editable = false;
            myGrid.colModel = [
                {title:"Id", dataType: "string", hidden: true },
                {title:"No.", width:100, dataType:"string"},
                {title:"Title", width:150, dataType:"string"}
            ];
            
            myGrid.render = function (evt, obj) {
                var $toolbar = $("<div class='pq-grid-toolbar pq-grid-toolbar-search'></div>").appendTo($(".pq-grid-top", this));       
                
                $("<input type='button' value='Filter' class='pq-filter-btn'/>").appendTo($toolbar).click(function () {
                    pqFilter.search();
                });  
                     
                $("<input type='text' class='pq-filter-txt'/>").appendTo($toolbar).appendTo($toolbar).keyup(function (evt) {
                    if (evt.keyCode == 13) {
                        pqFilter.search();
                    }
                });     
                                
                $("<select id='pq-filter-select-column'>\
                <option value='Name'>No.</option>\
                <option value='Title__c'>Title</option>\
                </select>").appendTo($toolbar).change(function (evt){
                    pqFilter.search();
                });    
                                            
                $("<span class='pq-separator'></span>").appendTo($toolbar);
         
            };
            $myrGrid = $("#myGrid_array").pqGrid( myGrid ); 

        getMyGridData();  
    }); 

      function getMyGridData(){
            Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.MyController.queryMyList}',
                function(result){                                  
                    $(result).each(function (i) {
                        myGridData.push([result[i].Id,
                                        result[i].Name ? result[i].Name : '',
                                        result[i].Title__c ? result[i].Title__c : '']); 
                       
                    });                                       
                    $myGrid = $("#myGrid_array").pqGrid( "option", "dataModel", { data: myGridData, paging: 'local'} ); 
                }
            );
       }

    var pqFilter = {
            search: function () {
                var txt = $("input.pq-filter-txt").val().toUpperCase(),
                colIndx = $("select#pq-filter-select-column").val();

                Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.MyController.filterMyData}',
                    colIndx, txt,
                    function(result,event){
                        gridData =[];
                        $(result).each(function (i) {
                            gridData.push( [result[i].Id,
                                            result[i].Name ? result[i].Name : '',
                                            result[i].Title__c ? result[i].Title__c : '']); 
                           
                        });
                        
                        
                        $myGrid.pqGrid( "option", "dataModel", { data: gridData} );     
                        $myGrid.pqGrid("refresh");              
                    }                
                ); 
                           
            }
        }
</script>