:: Forum >>

XML and Paging

It is possible to page xml data on client side, this stuff is awesome, for those who are wondering, here is how
Include the ActiveWidgets/patches/paging1.js in your html file and..
var data = new Active.XML.Table;
        var obj = new Active.Controls.Grid;
        
data.setText = function(value, i, j){
var node = this.getNode(i, j);
node.text = value; }
// Page returning xml
        data.setURL("jsps/"+GridType+".jsp");
        obj.setId(GridType);
        data.request();

        var columns = ["Release ID","Package Name", "First Project ID", "ECM Number", "Repository Name", "Review ID", "Review Date", "Status", "DeveloperID"];
        
        var defaultResponse = data.response;
        data.response = function(data){
            defaultResponse.call(this, data);
                        
            // replace the built-in row model with the new one (defined in the patch)
            obj.setModel("row", new Active.Rows.Page);
            obj.setProperty("row/count", this.getCount());
            obj.setProperty("column/count", 9);
            obj.setProperty("column/texts", columns);
            // set page size
            obj.setProperty("row/pageSize", 10);
            goToPage(0,obj,GridType+'Lbl');
        }

    function goToPage(delta,obj,lbl){
        var rowCount = obj.getProperty("row/count");
        var count = obj.getProperty("row/pageCount");
        var number = obj.getProperty("row/pageNumber");
        number += delta;
        if (number < 0) {number = 0}
        if (number > count-1) {number = count-1}
        document.getElementById(lbl).innerHTML = "Page <b>" + (number + 1) + "</b> of <b>" + count + "</b>"
        document.getElementById(lbl+'Rows').innerHTML = "Total Rows <b>"+ rowCount +"</b>";
        obj.setProperty("row/pageNumber", number);
        obj.refresh();
    }


that's it...
satch
Wednesday, November 17, 2004
where do i get this file ActiveWidgets/patches/paging1.js ?
Daron
Thursday, November 18, 2004
Under ActiveWidgets directory
satch
Thursday, November 18, 2004
DOH! Thanks for answering a stupid question...
Daron
Thursday, November 18, 2004
GridType is not defined
david
Thursday, April 21, 2005
I had problems with Satch's code so i modified a little bit and come to make it work - i have 1500 records and performance is good :

<script>

    // create ActiveWidgets data model - XML-based table
    var table = new Active.XML.Table;
var obj = new Active.Controls.Grid;

    table.setText = function(value, i, j){
        var node = this.getNode(i, j);
    node.text = value; }

    // provide data URL
    table.setURL("data.xml");
    
    // start asyncronous data retrieval
    table.request();

    // define column labels
    var columns = ["column1", "column2", "column3", "column4"];

    // provide external model as a grid data source
    obj.setDataModel(table);

    // Write navigation bar once table is populated (Active.XML.Table retrieves data asynchronously)
    var resultsCount;
    var defaultResponse = table.response;
    table.response = function(data){
        var maxrows = 25;
        defaultResponse.call(table, data);
        
        // replace the built-in row model with the new one (defined in the patch)
        obj.setModel("row", new Active.Rows.Page);
        resultsCount = this.getCount();
        obj.setProperty("row/count", resultsCount);
        obj.setProperty("column/count", columns.length);
        obj.setProperty("column/texts", columns);
        
        document.getElementById('resultsCount').innerHTML = "("+ resultsCount + " result(s) found)";
        
        // set page size
        obj.setProperty("row/pageSize", maxrows);
        goToPage(0);
        }
        
        // alternate background rows
        function myColor(){
            var value = this.getProperty("row/order");
            return (value & 1) ? "#e9e9e9" : "#fff";
        }
        obj.getTemplate("row", 0).setStyle("background-color", myColor);
        
        // override sort function
        var _sort = obj.sort;
obj.sort = function(index, direction){
_sort.call(this, index, direction);
document.getElementById('pageLabel').innerHTML = "Page " + 1 + " of " + obj.getProperty("row/pageCount") + " ";

        }
        
    document.write(
    "<div id='nav' style='visibility:hidden'>"+
    "<input type='image' src='_img/first.gif' onclick='goToPage(-Infinity)' border='0' alt='First Page'>&nbsp;&nbsp;&nbsp;"+
    "<input type='image' src='_img/prev.gif' onclick='goToPage(-1)' border='0' alt='Previous Page'>&nbsp;&nbsp;&nbsp;"+
    "<span id='pageLabel'></span>&nbsp;&nbsp;&nbsp;"+
    "<input type='image' src='_img/next.gif' onclick='goToPage(1)' border='0' alt='Next Page'>&nbsp;&nbsp;&nbsp;"+
    "<input type='image' src='_img/last.gif' onclick='goToPage(Infinity)' border='0' alt='Last Page'>&nbsp;&nbsp;&nbsp;"+
    "<span id='resultsCount'></span>&nbsp;&nbsp;&nbsp;"+
    "</div>\n");
    
    // write grid html to the page
    document.write(obj);
    
</script>



    <!-- button click handler -->
    <script>
    function goToPage(delta){
        
        var count = obj.getProperty("row/pageCount");
        var number = obj.getProperty("row/pageNumber");
        number += delta;
        if (number < 0) {number = 0}
        if (number > count-1) {number = count-1}
        document.getElementById('pageLabel').innerHTML = "Page " + (number + 1) + " of " + count + " ";

        obj.setProperty("row/pageNumber", number);
        
        obj.refresh();
        document.getElementById("nav").style.visibility = "visible";
    }
    
</script>
Olivier
Friday, December 9, 2005
I have more than 1500 rows in my file and with explorer it doesn't work (always no data found), how can I solve this problem? It's a xml-dataset.
Daniele
Monday, February 20, 2006
Are you using virtual mode?
Tony
Monday, February 20, 2006
ActiveWidgets 1.x does not support virtual loading as far as I know. Exactly the reason for using the paging patch.....
Neil Craig
Tuesday, August 1, 2006

This topic is archived.


Back to support forum

Forum search