Loading ...
Sorry, an error occurred while loading the content.

Re: Paginator with datatable using dynamic (filtered) localdata

Expand Messages
  • Lucas Smith
    Mike, It looks like you re mixing 2.5.1 sources and 2.6.0 paradigms (dynamicData). I recommend using 2.6.0. I ve uploaded a new version of the filtering
    Message 1 of 9 , Jan 2, 2009
    • 0 Attachment
      Mike,

      It looks like you're mixing 2.5.1 sources and 2.6.0 paradigms
      (dynamicData). I recommend using 2.6.0. I've uploaded a new version
      of the filtering example to
      http://yuiblog.com/sandbox/yui/v260/examples/datatable/filter_func_pag.html

      for you to look at. The important thing to note is that unless the
      callback object passed to myDataSource.sendRequest(req,callback)
      includes an 'argument' property, the Paginator's values won't get
      updated. E.g.

      ds.sendRequest(data, {
      success: dt.onDataReturnSetRows,
      scope: dt,
      argument: {}
      });

      will update the Paginator, while

      ds.sendRequest(data, {
      success: dt.onDataReturnSetRows,
      scope: dt
      });

      won't.

      It's an odd condition, that if you find troubling, please submit a bug
      on SourceForge.

      Anyway, I hope this helps. If not, keep asking and we'll get it
      figured out!

      Luke

      --- In ydn-javascript@yahoogroups.com, "rivettmj" <rivettmj@...> wrote:
      >
      > I've been continuing to play with the pagination functions and have
      > almost got it working, the only thing that does not work at the
      > moment, is the number of pages in the data set does not update
      > correctly (the initial data load has three pages, and if you filter it
      > down, it still shows three pages in the smaller table, two of which
      > are empty) I just know I'm missing something simple at this point
      > (being able to tell the pagination object 'please refresh!')
      >
      > Here is the updated code I'm working with:
      >
      > <html>
      > <head>
      > <title>Test Page</title>
      > <link type="text/css" rel="stylesheet"
      > href="../assets/dpSyntaxHighlighter.css">
      > <link rel="stylesheet" type="text/css"
      >
      href="http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatable.css">
      > <style type="text/css">
      > body {
      > font: normal .9em/1.3 Arial, sans-serif;
      > }
      > .origin {
      > display: block;
      > background: #795089;
      > padding: 1ex;
      > color: #fff;
      > text-align: right;
      > margin-bottom: 1em;
      > }
      > label {
      > display: block;
      > margin-bottom: 1em;
      > }
      > </style>
      > </head>
      > <body class="yui-skin-sam">
      > <a class="origin"
      >
      href="http://tech.groups.yahoo.com/group/ydn-javascript/message/29679">ydn-js
      > origin</a>
      >
      > <div class="markup">
      > <label for="filter">Show
      > <select id="filter">
      > <option value="0">all records</option>
      > <option value="10">Items with Quantity > 10</option>
      > <option value="50">Items with Quantity > 50</option>
      >
      > <option value="75">Items with Quantity > 75</option>
      > <option value="100">Items with Quantity > 100</option>
      > <option value="200">Items with Quantity > 200</option>
      > </select>
      >
      > </label>
      > <div id="tbl"></div>
      > </div>
      >
      > <script type="text/javascript"
      >
      src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      > <script type="text/javascript"
      >
      src="http://yui.yahooapis.com/2.5.1/build/element/element-beta.js"></script>
      > <script type="text/javascript"
      > src="../../build/paginator/paginator-min.js"></script>
      > <link rel="stylesheet" type="text/css"
      > href="../../build/paginator/assets/skins/sam/paginator.css" />
      >
      >
      > <script type="text/javascript"
      >
      src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta.js"></script>
      > <script type="text/javascript"
      >
      src="http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta.js"></script>
      > <script type="text/javascript"
      >
      src="http://developer.yahoo.com/yui/examples/datatable/assets/js/data.js"></script>
      > <script type="text/javascript">
      > YAHOO.util.Event.onDOMReady(function () {
      >
      > var Ex = YAHOO.namespace('example'),
      > data = YAHOO.example.Data.inventory,
      > totrec = 0;
      >
      > var myFilter = function (min) {
      > var results = [];
      > totrec = 0;
      > for (var i=0,l=data.length; i<l; ++i) {
      > if (data[i].Quantity > min) {
      > results.push(data[i]);
      > totrec = totrec + 1;
      > }
      > }
      >
      > // Generate an oResponse object
      > alert(totrec+" "+min);
      > //myDataTable.totalRecords = totrec;
      > return results;
      > };
      >
      > Ex.dataSource = new YAHOO.util.DataSource(myFilter);
      > Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
      > Ex.dataSource.responseSchema = {
      > fields : ['SKU','Quantity','Item','Description']
      > };
      >
      > var myConfigs = {
      > initialRequest: 0, // Initial request for first page
      > of data
      > dynamicData: true, // Enables dynamic server-driven data
      > sortedBy : {key:"SKU",
      > dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
      > paginator: new YAHOO.widget.Paginator({ rowsPerPage:5
      > }) // Enables pagination
      > };
      >
      > Ex.dataTable = new YAHOO.widget.DataTable('tbl', [
      > {key:'SKU'},{key:'Quantity'},{key:'Item'},{key:'Description'}
      > ],Ex.dataSource,myConfigs);
      >
      > Ex.callback = {
      > success : Ex.dataTable.onDataReturnInitializeTable,
      > failure : Ex.dataTable.onDataReturnInitializeTable,
      > scope : Ex.dataTable
      > };
      >
      > YAHOO.util.Event.on('filter','change',function (e) {
      > var min = parseInt(this.options[this.selectedIndex].value,10);
      > Ex.dataSource.sendRequest(min, Ex.callback);
      > });
      >
      > });
      >
      > </script>
      > <script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"
      > ></script>
      > <script type="text/javascript"
      > src="../assets/dpSyntaxHighlightExample.js"></script>
      > </body>
      > </html>
      >
      >
      > --- In ydn-javascript@yahoogroups.com, "rivettmj" <rivettmj@> wrote:
      > >
      > > Hello again, I've had a lot of success building a datatable that you
      > > can filter by searching user entered form data, however I've been
      > > unsuccessful getting Paginator to play with it (it works for the
      > > initial page, but breaks when the number of items in the table
      > > changes. I assume that this is because it has no way of 'knowing' how
      > > many items are getting displayed. I've found a couple of smalled
      > > examples of dynamic tables, and am now trying to get Paginator to work
      > > with then before trying to integrate this feature into the more
      > > complex page I already have. here is the example I'm trying to get
      > > working:
      > >
      > >
      >
      http://www.explodingcow.com/~rivettmj/yui/examples/datatable/yuiblog.html
      > >
      > > I've tried *many* different combination of the
      > > http://developer.yahoo.com/yui/docs/YAHOO.widget.Paginator.html
      > > methods, none seem to work. (I figure what I want to provide is really
      > > 'serverside' data display, but using a local JSARRAY for data)
      > >
      > > I have the page currently building a variable called totrec, that
      > > always returns the number of items in the table, I'm just not sure how
      > > to tell the paginator about them :)
      > >
      > > Any help from the masters of YUI would be greatly appreciated!
      > >
      > > -- Mike
      > >
      >
    • rivettmj
      Well sir, I have taken your example and managed to totally break it ... (There are a couple of attempts to customize it for learning that are commented out)
      Message 2 of 9 , Jan 3, 2009
      • 0 Attachment
        Well sir, I have taken your example and managed to totally break it ...

        (There are a couple of attempts to customize it for learning that are
        commented out)

        what I don't quite get is why the code below does not filter when you
        change Ex.filter = function (type) { to Ex.filter = function (upc) {
        (I know it wont work 'correctly' but it should at least work for
        'missing' right?)

        The other question I have is: is there an easy way to fill the data[]
        array with the data from the dataTable? (it seems like reinventing the
        wheel to me?) I cant seem to find an easy way to pull the data from a
        dataTable after loading it (I was thinking of a simple for loop going
        from 0 to the number of rows, and then simply dump row[i].values to
        data[i].values ...)

        I'm more used to C code, so all these objects are making my head hurt ;)

        <html>
        <head>
        <title>Test Page</title>
        <link type="text/css" rel="stylesheet"
        href="../assets/dpSyntaxHighlighter.css">
        <link rel="stylesheet" type="text/css"
        href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">
        <link rel="stylesheet" type="text/css"
        href="http://yui.yahooapis.com/2.6.0/build/paginator/assets/skins/sam/paginator.css">
        <style type="text/css">
        body {
        font: normal .88em/1.4 Arial, sans-serif;
        }
        .markup {
        clear: both;
        border-bottom: 1px solid #ccc;
        padding-bottom: 1em;
        overflow: hidden;
        }
        h2 {
        clear: both;
        }
        #cur {
        width: 18em;
        text-align: right;
        border-bottom: 3px solid #333;
        color: #333;
        margin-bottom: .2em;
        }
        #cur span {
        margin: 0;
        }
        .col {
        width: 63em;
        display: inline;
        float: left;
        padding-left: 1em;
        }
        #filters {
        width: 5.8em;
        }
        #filters h4 {
        margin: 0;
        line-height: 225%;
        border-bottom: 1px dashed #aaa;
        color: #333;
        }
        #filters ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }
        </style>
        </head>
        <body class="yui-skin-sam">

        <div class="markup">
        <h3 id="cur"></h3>
        <div class="col">
        <div id="pag"></div>
        <div id="tbl"></div>
        </div>
        <div id="filters" class="col">
        <h4>Filter by</h4>

        <ul>
        <li><a href="?filter=">All</a></li>
        <li><a href="?filter=foo">Foo</a></li>
        <li><a href="?filter=bar">Bar</a></li>
        <li><a href="?filter=baz">Baz</a></li>
        <li><a href="?filter=missing">Missing</a></li>

        </ul>
        </div>
        </div>

        <script type="text/javascript"
        src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/element/element-beta.js&2.6.0/build/datasource/datasource.js&2.6.0/build/datatable/datatable.js&2.6.0/build/paginator/paginator.js"></script>
        <!--script type="text/javascript"
        src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        <script type="text/javascript"
        src="http://yui.yahooapis.com/2.6.0/build/element/element-beta.js"></script>
        <script type="text/javascript"
        src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource.js"></script>
        <script type="text/javascript"
        src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable.js"></script>
        <script type="text/javascript"
        src="http://yui.yahooapis.com/2.6.0/build/paginator/paginator.js"></script-->
        <script type="text/javascript"
        src="http://www.explodingcow.com/~rivettmj/coupondb/coupon-feed.php"></script>
        <script type="text/javascript">
        YAHOO.util.Event.onDOMReady(function () {

        var Ex = YAHOO.namespace('example'),
        Event = YAHOO.util.Event,
        Dom = YAHOO.util.Dom,
        initialFilter = /filter=(\w*)/.test(location.search) ? RegExp.$1
        : null,

        data = [],
        i = 0;
        alert(initialFilter);
        // Load up the array with some arbitrary data
        for (;i<500;++i) {
        data[i] = {
        'foo': i,
        'bar': 'bar:'+i,
        'type': ['foo','bar'][(Math.random()*2)|0]
        };
        }
        data[9].type = data[270].type = data[284].type = data[485].type = 'baz';


        //data[0] = {
        // 'id': '1',
        // 'upc': '536632700501',
        // 'value': '1',
        // 'quantity': 'Off Any 4pack',
        // 'linkable': 'true',
        // 'link': 'httprivettorg',
        // 'approved': 'true',
        // 'expiration': '12-31-2008',
        // 'origin': 'SS 92108',
        // 'flagable': 'False',
        // 'flagreason': '',
        // 'deleted': 'False'
        //};
        //i=1;
        //alert(data[0].upc);


        //Ex.filter = function (upc) {
        // alert(data.length);
        // if (!upc || !upc.length) {
        // alert('foo');
        // return data;
        //}

        // var results = [];
        // for (var i=0,j=0,l=data.length; i<l ; ++i) {
        // alert('found!');
        //if (data[i].upc == upc) {
        //
        //results[j++] = data[i];
        // }
        //}
        //return results;
        //};

        Ex.filter = function (type) {
        alert(data.length);
        if (!type || !type.length) {
        return data;
        }

        var results = [];
        for (var i=0,j=0,l=data.length; i<l ; ++i) {
        if (data[i].type == type) {
        results[j++] = data[i];
        }
        }
        return results;
        };

        Ex.dataSource = new YAHOO.util.DataSource(YAHOO.Couponfeed.coupons);
        Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        Ex.dataSource.responseSchema = {
        fields : ["id", "upc", "description", "value", "quantity",
        "linkable", "link", "approved", "expiration", "origin", "flagable",
        "flagged", "flagreason", "deleted"]
        };

        Ex.paginator = new YAHOO.widget.Paginator({
        containers : 'pag',
        alwaysVisible : false,
        template : '{FirstPageLink} {PreviousPageLink} {NextPageLink}
        {LastPageLink}',
        firstPageLinkLabel : 'First',
        lastPageLinkLabel : 'Last',
        previousPageLinkLabel : 'Prev',
        nextPageLinkLabel : 'Next',
        rowsPerPage : 10
        });

        Ex.paginator.subscribe('rendered',function () {
        var report = new
        YAHOO.widget.Paginator.ui.CurrentPageReport(Ex.paginator);
        Dom.get('cur').appendChild(report.render('my'));
        });

        Ex.dataTable = new YAHOO.widget.DataTable('tbl',
        [ {key:"upc", sortable:true, resizeable:true},
        {key:"expiration", formatter:YAHOO.widget.DataTable.formatDate,
        sortable:true,
        sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
        {key:"description", sortable:true, resizeable:true},
        {key:"value", sortable:true, resizeable:true},
        {key:"quantity", sortable:true, resizeable:true},
        {key:"origin", sortable:true, resizeable:true},
        {key:"link", sortable:true, resizeable:true}
        ],
        Ex.dataSource,
        {
        paginator: Ex.paginator,
        initialRequest : initialFilter
        });

        Ex.callback = {
        success : Ex.dataTable.onDataReturnInitializeTable,
        failure : Ex.dataTable.onDataReturnInitializeTable,
        scope : Ex.dataTable
        };

        Event.on('filters','click',function (e) {
        var target = Event.getTarget(e),
        sort = Ex.dataTable.get('sortedBy'),
        filter;
        //alert(target.nodeName.toLowerCase());
        if (target.nodeName.toLowerCase() == 'a') {
        Event.preventDefault(e);

        if (sort) {
        // Sort the source data
        var asc = (sort.dir.indexOf('asc') !== -1),
        k = sort.key;
        data.sort(function (a,b) {
        return a[k]===b[k]?0:(a[k]<b[k]?(asc?-1:1):(asc?1:-1));
        });

        // Pass the sort info in the payload to reset sortedBy after
        // initializeTable clears it.
        Ex.callback.argument = {
        sortKey : sort.key,
        sortDir : sort.dir
        };
        } else {
        Ex.callback.argument = {};
        }
        filter = /filter=(\w*)/.test(target.href) ? RegExp.$1 : null;
        Ex.dataSource.sendRequest(filter,Ex.callback);
        }

        });

        });
        </script>
        <script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"
        ></script>
        <script type="text/javascript"
        src="../assets/dpSyntaxHighlightExample.js"></script>
        </body>
        </html>


        --- In ydn-javascript@yahoogroups.com, "Lucas Smith" <lsmith@...> wrote:
        >
        > Mike,
        >
        > It looks like you're mixing 2.5.1 sources and 2.6.0 paradigms
        > (dynamicData). I recommend using 2.6.0. I've uploaded a new version
        > of the filtering example to
        >
        http://yuiblog.com/sandbox/yui/v260/examples/datatable/filter_func_pag.html
        >
        > for you to look at. The important thing to note is that unless the
        > callback object passed to myDataSource.sendRequest(req,callback)
        > includes an 'argument' property, the Paginator's values won't get
        > updated. E.g.
        >
        > ds.sendRequest(data, {
        > success: dt.onDataReturnSetRows,
        > scope: dt,
        > argument: {}
        > });
        >
        > will update the Paginator, while
        >
        > ds.sendRequest(data, {
        > success: dt.onDataReturnSetRows,
        > scope: dt
        > });
        >
        > won't.
        >
        > It's an odd condition, that if you find troubling, please submit a bug
        > on SourceForge.
        >
        > Anyway, I hope this helps. If not, keep asking and we'll get it
        > figured out!
        >
        > Luke
        >
        > --- In ydn-javascript@yahoogroups.com, "rivettmj" <rivettmj@> wrote:
        > >
        > > I've been continuing to play with the pagination functions and have
        > > almost got it working, the only thing that does not work at the
        > > moment, is the number of pages in the data set does not update
        > > correctly (the initial data load has three pages, and if you filter it
        > > down, it still shows three pages in the smaller table, two of which
        > > are empty) I just know I'm missing something simple at this point
        > > (being able to tell the pagination object 'please refresh!')
        > >
        > > Here is the updated code I'm working with:
        > >
        > > <html>
        > > <head>
        > > <title>Test Page</title>
        > > <link type="text/css" rel="stylesheet"
        > > href="../assets/dpSyntaxHighlighter.css">
        > > <link rel="stylesheet" type="text/css"
        > >
        >
        href="http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatable.css">
        > > <style type="text/css">
        > > body {
        > > font: normal .9em/1.3 Arial, sans-serif;
        > > }
        > > .origin {
        > > display: block;
        > > background: #795089;
        > > padding: 1ex;
        > > color: #fff;
        > > text-align: right;
        > > margin-bottom: 1em;
        > > }
        > > label {
        > > display: block;
        > > margin-bottom: 1em;
        > > }
        > > </style>
        > > </head>
        > > <body class="yui-skin-sam">
        > > <a class="origin"
        > >
        >
        href="http://tech.groups.yahoo.com/group/ydn-javascript/message/29679">ydn-js
        > > origin</a>
        > >
        > > <div class="markup">
        > > <label for="filter">Show
        > > <select id="filter">
        > > <option value="0">all records</option>
        > > <option value="10">Items with Quantity > 10</option>
        > > <option value="50">Items with Quantity > 50</option>
        > >
        > > <option value="75">Items with Quantity > 75</option>
        > > <option value="100">Items with Quantity > 100</option>
        > > <option value="200">Items with Quantity > 200</option>
        > > </select>
        > >
        > > </label>
        > > <div id="tbl"></div>
        > > </div>
        > >
        > > <script type="text/javascript"
        > >
        >
        src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        > > <script type="text/javascript"
        > >
        >
        src="http://yui.yahooapis.com/2.5.1/build/element/element-beta.js"></script>
        > > <script type="text/javascript"
        > > src="../../build/paginator/paginator-min.js"></script>
        > > <link rel="stylesheet" type="text/css"
        > > href="../../build/paginator/assets/skins/sam/paginator.css" />
        > >
        > >
        > > <script type="text/javascript"
        > >
        >
        src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta.js"></script>
        > > <script type="text/javascript"
        > >
        >
        src="http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta.js"></script>
        > > <script type="text/javascript"
        > >
        >
        src="http://developer.yahoo.com/yui/examples/datatable/assets/js/data.js"></script>
        > > <script type="text/javascript">
        > > YAHOO.util.Event.onDOMReady(function () {
        > >
        > > var Ex = YAHOO.namespace('example'),
        > > data = YAHOO.example.Data.inventory,
        > > totrec = 0;
        > >
        > > var myFilter = function (min) {
        > > var results = [];
        > > totrec = 0;
        > > for (var i=0,l=data.length; i<l; ++i) {
        > > if (data[i].Quantity > min) {
        > > results.push(data[i]);
        > > totrec = totrec + 1;
        > > }
        > > }
        > >
        > > // Generate an oResponse object
        > > alert(totrec+" "+min);
        > > //myDataTable.totalRecords = totrec;
        > > return results;
        > > };
        > >
        > > Ex.dataSource = new YAHOO.util.DataSource(myFilter);
        > > Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        > > Ex.dataSource.responseSchema = {
        > > fields : ['SKU','Quantity','Item','Description']
        > > };
        > >
        > > var myConfigs = {
        > > initialRequest: 0, // Initial request for first page
        > > of data
        > > dynamicData: true, // Enables dynamic
        server-driven data
        > > sortedBy : {key:"SKU",
        > > dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
        > > paginator: new YAHOO.widget.Paginator({ rowsPerPage:5
        > > }) // Enables pagination
        > > };
        > >
        > > Ex.dataTable = new YAHOO.widget.DataTable('tbl', [
        > > {key:'SKU'},{key:'Quantity'},{key:'Item'},{key:'Description'}
        > > ],Ex.dataSource,myConfigs);
        > >
        > > Ex.callback = {
        > > success : Ex.dataTable.onDataReturnInitializeTable,
        > > failure : Ex.dataTable.onDataReturnInitializeTable,
        > > scope : Ex.dataTable
        > > };
        > >
        > > YAHOO.util.Event.on('filter','change',function (e) {
        > > var min = parseInt(this.options[this.selectedIndex].value,10);
        > > Ex.dataSource.sendRequest(min, Ex.callback);
        > > });
        > >
        > > });
        > >
        > > </script>
        > > <script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"
        > > ></script>
        > > <script type="text/javascript"
        > > src="../assets/dpSyntaxHighlightExample.js"></script>
        > > </body>
        > > </html>
        > >
        > >
        > > --- In ydn-javascript@yahoogroups.com, "rivettmj" <rivettmj@> wrote:
        > > >
        > > > Hello again, I've had a lot of success building a datatable
        that you
        > > > can filter by searching user entered form data, however I've been
        > > > unsuccessful getting Paginator to play with it (it works for the
        > > > initial page, but breaks when the number of items in the table
        > > > changes. I assume that this is because it has no way of
        'knowing' how
        > > > many items are getting displayed. I've found a couple of smalled
        > > > examples of dynamic tables, and am now trying to get Paginator
        to work
        > > > with then before trying to integrate this feature into the more
        > > > complex page I already have. here is the example I'm trying to get
        > > > working:
        > > >
        > > >
        > >
        >
        http://www.explodingcow.com/~rivettmj/yui/examples/datatable/yuiblog.html
        > > >
        > > > I've tried *many* different combination of the
        > > > http://developer.yahoo.com/yui/docs/YAHOO.widget.Paginator.html
        > > > methods, none seem to work. (I figure what I want to provide is
        really
        > > > 'serverside' data display, but using a local JSARRAY for data)
        > > >
        > > > I have the page currently building a variable called totrec, that
        > > > always returns the number of items in the table, I'm just not
        sure how
        > > > to tell the paginator about them :)
        > > >
        > > > Any help from the masters of YUI would be greatly appreciated!
        > > >
        > > > -- Mike
        > > >
        > >
        >
      • Lucas Smith
        I ve uploaded another example that simplifies the filtering operation. http://yuiblog.com/sandbox/yui/v260/examples/datatable/filtered.html Try working from
        Message 3 of 9 , Jan 5, 2009
        • 0 Attachment
          I've uploaded another example that simplifies the filtering operation.
          http://yuiblog.com/sandbox/yui/v260/examples/datatable/filtered.html

          Try working from this one and see if it makes more sense.

          Luke

          --- In ydn-javascript@yahoogroups.com, "rivettmj" <rivettmj@...> wrote:
          >
          > Well sir, I have taken your example and managed to totally break it ...
          >
          > (There are a couple of attempts to customize it for learning that are
          > commented out)
          >
          > what I don't quite get is why the code below does not filter when you
          > change Ex.filter = function (type) { to Ex.filter = function (upc) {
          > (I know it wont work 'correctly' but it should at least work for
          > 'missing' right?)
          >
          > The other question I have is: is there an easy way to fill the data[]
          > array with the data from the dataTable? (it seems like reinventing the
          > wheel to me?) I cant seem to find an easy way to pull the data from a
          > dataTable after loading it (I was thinking of a simple for loop going
          > from 0 to the number of rows, and then simply dump row[i].values to
          > data[i].values ...)
          >
          > I'm more used to C code, so all these objects are making my head hurt ;)
          >
          > <html>
          > <head>
          > <title>Test Page</title>
          > <link type="text/css" rel="stylesheet"
          > href="../assets/dpSyntaxHighlighter.css">
          > <link rel="stylesheet" type="text/css"
          >
          href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">
          > <link rel="stylesheet" type="text/css"
          >
          href="http://yui.yahooapis.com/2.6.0/build/paginator/assets/skins/sam/paginator.css">
          > <style type="text/css">
          > body {
          > font: normal .88em/1.4 Arial, sans-serif;
          > }
          > .markup {
          > clear: both;
          > border-bottom: 1px solid #ccc;
          > padding-bottom: 1em;
          > overflow: hidden;
          > }
          > h2 {
          > clear: both;
          > }
          > #cur {
          > width: 18em;
          > text-align: right;
          > border-bottom: 3px solid #333;
          > color: #333;
          > margin-bottom: .2em;
          > }
          > #cur span {
          > margin: 0;
          > }
          > .col {
          > width: 63em;
          > display: inline;
          > float: left;
          > padding-left: 1em;
          > }
          > #filters {
          > width: 5.8em;
          > }
          > #filters h4 {
          > margin: 0;
          > line-height: 225%;
          > border-bottom: 1px dashed #aaa;
          > color: #333;
          > }
          > #filters ul {
          > list-style: none;
          > margin: 0;
          > padding: 0;
          > }
          > </style>
          > </head>
          > <body class="yui-skin-sam">
          >
          > <div class="markup">
          > <h3 id="cur"></h3>
          > <div class="col">
          > <div id="pag"></div>
          > <div id="tbl"></div>
          > </div>
          > <div id="filters" class="col">
          > <h4>Filter by</h4>
          >
          > <ul>
          > <li><a href="?filter=">All</a></li>
          > <li><a href="?filter=foo">Foo</a></li>
          > <li><a href="?filter=bar">Bar</a></li>
          > <li><a href="?filter=baz">Baz</a></li>
          > <li><a href="?filter=missing">Missing</a></li>
          >
          > </ul>
          > </div>
          > </div>
          >
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/element/element-beta.js&2.6.0/build/datasource/datasource.js&2.6.0/build/datatable/datatable.js&2.6.0/build/paginator/paginator.js"></script>
          > <!--script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.6.0/build/element/element-beta.js"></script>
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource.js"></script>
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable.js"></script>
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.6.0/build/paginator/paginator.js"></script-->
          > <script type="text/javascript"
          >
          src="http://www.explodingcow.com/~rivettmj/coupondb/coupon-feed.php"></script>
          > <script type="text/javascript">
          > YAHOO.util.Event.onDOMReady(function () {
          >
          > var Ex = YAHOO.namespace('example'),
          > Event = YAHOO.util.Event,
          > Dom = YAHOO.util.Dom,
          > initialFilter = /filter=(\w*)/.test(location.search) ? RegExp.$1
          > : null,
          >
          > data = [],
          > i = 0;
          > alert(initialFilter);
          > // Load up the array with some arbitrary data
          > for (;i<500;++i) {
          > data[i] = {
          > 'foo': i,
          > 'bar': 'bar:'+i,
          > 'type': ['foo','bar'][(Math.random()*2)|0]
          > };
          > }
          > data[9].type = data[270].type = data[284].type = data[485].type = 'baz';
          >
          >
          > //data[0] = {
          > // 'id': '1',
          > // 'upc': '536632700501',
          > // 'value': '1',
          > // 'quantity': 'Off Any 4pack',
          > // 'linkable': 'true',
          > // 'link': 'httprivettorg',
          > // 'approved': 'true',
          > // 'expiration': '12-31-2008',
          > // 'origin': 'SS 92108',
          > // 'flagable': 'False',
          > // 'flagreason': '',
          > // 'deleted': 'False'
          > //};
          > //i=1;
          > //alert(data[0].upc);
          >
          >
          > //Ex.filter = function (upc) {
          > // alert(data.length);
          > // if (!upc || !upc.length) {
          > // alert('foo');
          > // return data;
          > //}
          >
          > // var results = [];
          > // for (var i=0,j=0,l=data.length; i<l ; ++i) {
          > // alert('found!');
          > //if (data[i].upc == upc) {
          > //
          > //results[j++] = data[i];
          > // }
          > //}
          > //return results;
          > //};
          >
          > Ex.filter = function (type) {
          > alert(data.length);
          > if (!type || !type.length) {
          > return data;
          > }
          >
          > var results = [];
          > for (var i=0,j=0,l=data.length; i<l ; ++i) {
          > if (data[i].type == type) {
          > results[j++] = data[i];
          > }
          > }
          > return results;
          > };
          >
          > Ex.dataSource = new YAHOO.util.DataSource(YAHOO.Couponfeed.coupons);
          > Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
          > Ex.dataSource.responseSchema = {
          > fields : ["id", "upc", "description", "value", "quantity",
          > "linkable", "link", "approved", "expiration", "origin", "flagable",
          > "flagged", "flagreason", "deleted"]
          > };
          >
          > Ex.paginator = new YAHOO.widget.Paginator({
          > containers : 'pag',
          > alwaysVisible : false,
          > template : '{FirstPageLink} {PreviousPageLink} {NextPageLink}
          > {LastPageLink}',
          > firstPageLinkLabel : 'First',
          > lastPageLinkLabel : 'Last',
          > previousPageLinkLabel : 'Prev',
          > nextPageLinkLabel : 'Next',
          > rowsPerPage : 10
          > });
          >
          > Ex.paginator.subscribe('rendered',function () {
          > var report = new
          > YAHOO.widget.Paginator.ui.CurrentPageReport(Ex.paginator);
          > Dom.get('cur').appendChild(report.render('my'));
          > });
          >
          > Ex.dataTable = new YAHOO.widget.DataTable('tbl',
          > [ {key:"upc", sortable:true, resizeable:true},
          > {key:"expiration", formatter:YAHOO.widget.DataTable.formatDate,
          > sortable:true,
          >
          sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
          > {key:"description", sortable:true, resizeable:true},
          > {key:"value", sortable:true, resizeable:true},
          > {key:"quantity", sortable:true, resizeable:true},
          > {key:"origin", sortable:true, resizeable:true},
          > {key:"link", sortable:true, resizeable:true}
          > ],
          > Ex.dataSource,
          > {
          > paginator: Ex.paginator,
          > initialRequest : initialFilter
          > });
          >
          > Ex.callback = {
          > success : Ex.dataTable.onDataReturnInitializeTable,
          > failure : Ex.dataTable.onDataReturnInitializeTable,
          > scope : Ex.dataTable
          > };
          >
          > Event.on('filters','click',function (e) {
          > var target = Event.getTarget(e),
          > sort = Ex.dataTable.get('sortedBy'),
          > filter;
          > //alert(target.nodeName.toLowerCase());
          > if (target.nodeName.toLowerCase() == 'a') {
          > Event.preventDefault(e);
          >
          > if (sort) {
          > // Sort the source data
          > var asc = (sort.dir.indexOf('asc') !== -1),
          > k = sort.key;
          > data.sort(function (a,b) {
          > return a[k]===b[k]?0:(a[k]<b[k]?(asc?-1:1):(asc?1:-1));
          > });
          >
          > // Pass the sort info in the payload to reset sortedBy after
          > // initializeTable clears it.
          > Ex.callback.argument = {
          > sortKey : sort.key,
          > sortDir : sort.dir
          > };
          > } else {
          > Ex.callback.argument = {};
          > }
          > filter = /filter=(\w*)/.test(target.href) ? RegExp.$1 : null;
          > Ex.dataSource.sendRequest(filter,Ex.callback);
          > }
          >
          > });
          >
          > });
          > </script>
          > <script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"
          > ></script>
          > <script type="text/javascript"
          > src="../assets/dpSyntaxHighlightExample.js"></script>
          > </body>
          > </html>
          >
          >
          > --- In ydn-javascript@yahoogroups.com, "Lucas Smith" <lsmith@> wrote:
          > >
          > > Mike,
          > >
          > > It looks like you're mixing 2.5.1 sources and 2.6.0 paradigms
          > > (dynamicData). I recommend using 2.6.0. I've uploaded a new version
          > > of the filtering example to
          > >
          >
          http://yuiblog.com/sandbox/yui/v260/examples/datatable/filter_func_pag.html
          > >
          > > for you to look at. The important thing to note is that unless the
          > > callback object passed to myDataSource.sendRequest(req,callback)
          > > includes an 'argument' property, the Paginator's values won't get
          > > updated. E.g.
          > >
          > > ds.sendRequest(data, {
          > > success: dt.onDataReturnSetRows,
          > > scope: dt,
          > > argument: {}
          > > });
          > >
          > > will update the Paginator, while
          > >
          > > ds.sendRequest(data, {
          > > success: dt.onDataReturnSetRows,
          > > scope: dt
          > > });
          > >
          > > won't.
          > >
          > > It's an odd condition, that if you find troubling, please submit a bug
          > > on SourceForge.
          > >
          > > Anyway, I hope this helps. If not, keep asking and we'll get it
          > > figured out!
          > >
          > > Luke
          > >
          > > --- In ydn-javascript@yahoogroups.com, "rivettmj" <rivettmj@> wrote:
          > > >
          > > > I've been continuing to play with the pagination functions and have
          > > > almost got it working, the only thing that does not work at the
          > > > moment, is the number of pages in the data set does not update
          > > > correctly (the initial data load has three pages, and if you
          filter it
          > > > down, it still shows three pages in the smaller table, two of which
          > > > are empty) I just know I'm missing something simple at this point
          > > > (being able to tell the pagination object 'please refresh!')
          > > >
          > > > Here is the updated code I'm working with:
          > > >
          > > > <html>
          > > > <head>
          > > > <title>Test Page</title>
          > > > <link type="text/css" rel="stylesheet"
          > > > href="../assets/dpSyntaxHighlighter.css">
          > > > <link rel="stylesheet" type="text/css"
          > > >
          > >
          >
          href="http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatable.css">
          > > > <style type="text/css">
          > > > body {
          > > > font: normal .9em/1.3 Arial, sans-serif;
          > > > }
          > > > .origin {
          > > > display: block;
          > > > background: #795089;
          > > > padding: 1ex;
          > > > color: #fff;
          > > > text-align: right;
          > > > margin-bottom: 1em;
          > > > }
          > > > label {
          > > > display: block;
          > > > margin-bottom: 1em;
          > > > }
          > > > </style>
          > > > </head>
          > > > <body class="yui-skin-sam">
          > > > <a class="origin"
          > > >
          > >
          >
          href="http://tech.groups.yahoo.com/group/ydn-javascript/message/29679">ydn-js
          > > > origin</a>
          > > >
          > > > <div class="markup">
          > > > <label for="filter">Show
          > > > <select id="filter">
          > > > <option value="0">all records</option>
          > > > <option value="10">Items with Quantity > 10</option>
          > > > <option value="50">Items with Quantity > 50</option>
          > > >
          > > > <option value="75">Items with Quantity > 75</option>
          > > > <option value="100">Items with Quantity >
          100</option>
          > > > <option value="200">Items with Quantity >
          200</option>
          > > > </select>
          > > >
          > > > </label>
          > > > <div id="tbl"></div>
          > > > </div>
          > > >
          > > > <script type="text/javascript"
          > > >
          > >
          >
          src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
          > > > <script type="text/javascript"
          > > >
          > >
          >
          src="http://yui.yahooapis.com/2.5.1/build/element/element-beta.js"></script>
          > > > <script type="text/javascript"
          > > > src="../../build/paginator/paginator-min.js"></script>
          > > > <link rel="stylesheet" type="text/css"
          > > > href="../../build/paginator/assets/skins/sam/paginator.css" />
          > > >
          > > >
          > > > <script type="text/javascript"
          > > >
          > >
          >
          src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta.js"></script>
          > > > <script type="text/javascript"
          > > >
          > >
          >
          src="http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta.js"></script>
          > > > <script type="text/javascript"
          > > >
          > >
          >
          src="http://developer.yahoo.com/yui/examples/datatable/assets/js/data.js"></script>
          > > > <script type="text/javascript">
          > > > YAHOO.util.Event.onDOMReady(function () {
          > > >
          > > > var Ex = YAHOO.namespace('example'),
          > > > data = YAHOO.example.Data.inventory,
          > > > totrec = 0;
          > > >
          > > > var myFilter = function (min) {
          > > > var results = [];
          > > > totrec = 0;
          > > > for (var i=0,l=data.length; i<l; ++i) {
          > > > if (data[i].Quantity > min) {
          > > > results.push(data[i]);
          > > > totrec = totrec + 1;
          > > > }
          > > > }
          > > >
          > > > // Generate an oResponse object
          > > > alert(totrec+" "+min);
          > > > //myDataTable.totalRecords = totrec;
          > > > return results;
          > > > };
          > > >
          > > > Ex.dataSource = new YAHOO.util.DataSource(myFilter);
          > > > Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
          > > > Ex.dataSource.responseSchema = {
          > > > fields : ['SKU','Quantity','Item','Description']
          > > > };
          > > >
          > > > var myConfigs = {
          > > > initialRequest: 0, // Initial request for first page
          > > > of data
          > > > dynamicData: true, // Enables dynamic
          > server-driven data
          > > > sortedBy : {key:"SKU",
          > > > dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
          > > > paginator: new YAHOO.widget.Paginator({
          rowsPerPage:5
          > > > }) // Enables pagination
          > > > };
          > > >
          > > > Ex.dataTable = new YAHOO.widget.DataTable('tbl', [
          > > > {key:'SKU'},{key:'Quantity'},{key:'Item'},{key:'Description'}
          > > > ],Ex.dataSource,myConfigs);
          > > >
          > > > Ex.callback = {
          > > > success : Ex.dataTable.onDataReturnInitializeTable,
          > > > failure : Ex.dataTable.onDataReturnInitializeTable,
          > > > scope : Ex.dataTable
          > > > };
          > > >
          > > > YAHOO.util.Event.on('filter','change',function (e) {
          > > > var min = parseInt(this.options[this.selectedIndex].value,10);
          > > > Ex.dataSource.sendRequest(min, Ex.callback);
          > > > });
          > > >
          > > > });
          > > >
          > > > </script>
          > > > <script type="text/javascript"
          src="../assets/dpSyntaxHighlighter.js"
          > > > ></script>
          > > > <script type="text/javascript"
          > > > src="../assets/dpSyntaxHighlightExample.js"></script>
          > > > </body>
          > > > </html>
          > > >
          > > >
          > > > --- In ydn-javascript@yahoogroups.com, "rivettmj" <rivettmj@> wrote:
          > > > >
          > > > > Hello again, I've had a lot of success building a datatable
          > that you
          > > > > can filter by searching user entered form data, however I've been
          > > > > unsuccessful getting Paginator to play with it (it works for the
          > > > > initial page, but breaks when the number of items in the table
          > > > > changes. I assume that this is because it has no way of
          > 'knowing' how
          > > > > many items are getting displayed. I've found a couple of smalled
          > > > > examples of dynamic tables, and am now trying to get Paginator
          > to work
          > > > > with then before trying to integrate this feature into the more
          > > > > complex page I already have. here is the example I'm trying
          to get
          > > > > working:
          > > > >
          > > > >
          > > >
          > >
          >
          http://www.explodingcow.com/~rivettmj/yui/examples/datatable/yuiblog.html
          > > > >
          > > > > I've tried *many* different combination of the
          > > > > http://developer.yahoo.com/yui/docs/YAHOO.widget.Paginator.html
          > > > > methods, none seem to work. (I figure what I want to provide is
          > really
          > > > > 'serverside' data display, but using a local JSARRAY for data)
          > > > >
          > > > > I have the page currently building a variable called totrec, that
          > > > > always returns the number of items in the table, I'm just not
          > sure how
          > > > > to tell the paginator about them :)
          > > > >
          > > > > Any help from the masters of YUI would be greatly appreciated!
          > > > >
          > > > > -- Mike
          > > > >
          > > >
          > >
          >
        • a Eric Daniel Leon Gonzalez
          Good example, but why it doesn t work for a input: w J ?? My expected is get New Jersey . Thanks, Eric ________________________________ From:
          Message 4 of 9 , Jan 5, 2009
          • 0 Attachment
            Good example, but why it doesn't work for a input: 'w J'??
             
            My expected is get "New Jersey".
             
            Thanks,
            Eric


            From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Lucas Smith
            Sent: Monday, January 05, 2009 9:53 AM
            To: ydn-javascript@yahoogroups.com
            Subject: [ydn-javascript] Re: Paginator with datatable using dynamic (filtered) localdata

            I've uploaded another example that simplifies the filtering operation.
            http://yuiblog. com/sandbox/ yui/v260/ examples/ datatable/ filtered. html

            Try working from this one and see if it makes more sense.

            Luke

            --- In ydn-javascript@ yahoogroups. com, "rivettmj" <rivettmj@.. .> wrote:

            >
            > Well sir, I have
            taken your example and managed to totally break it ...
            >
            > (There
            are a couple of attempts to customize it for learning that are
            > commented
            out)
            >
            > what I don't quite get is why the code below does not
            filter when you
            > change Ex.filter = function (type) { to Ex.filter =
            function (upc) {
            > (I know it wont work 'correctly' but it should at least
            work for
            > 'missing' right?)
            >
            > The other question I have
            is: is there an easy way to fill the data[]
            > array with the data from the
            dataTable? (it seems like reinventing the
            > wheel to me?) I cant seem to
            find an easy way to pull the data from a
            > dataTable after loading it (I
            was thinking of a simple for loop going
            > from 0 to the number of rows,
            and then simply dump row[i].values to
            > data[i].values ...)
            >
            > I'm more used to C code, so all these objects are making my head hurt
            ;)
            >
            > <html>
            > <head>
            > <title>Test
            Page</title>
            > <link type="text/css" rel="stylesheet"
            >
            href="../assets/ dpSyntaxHighligh ter.css">
            > <link
            rel="stylesheet" type="text/css"
            >
            href="http://yui.yahooapi s.com/2.6. 0/build/datatabl e/assets/ skins/sam/ datatable. css">
            >
            <link rel="stylesheet" type="text/css"
            >
            href="http://yui.yahooapi s.com/2.6. 0/build/paginato r/assets/ skins/sam/ paginator. css">
            >
            <style type="text/css" >
            > body {
            > font: normal .88em/1.4
            Arial, sans-serif;
            > }
            > .markup {
            > clear: both;
            >
            border-bottom: 1px solid #ccc;
            > padding-bottom: 1em;
            > overflow:
            hidden;
            > }
            > h2 {
            > clear: both;
            > }
            > #cur
            {
            > width: 18em;
            > text-align: right;
            > border-bottom: 3px
            solid #333;
            > color: #333;
            > margin-bottom: .2em;
            > }
            >
            #cur span {
            > margin: 0;
            > }
            > .col {
            > width:
            63em;
            > display: inline;
            > float: left;
            > padding-left:
            1em;
            > }
            > #filters {
            > width: 5.8em;
            > }
            >
            #filters h4 {
            > margin: 0;
            > line-height: 225%;
            >
            border-bottom: 1px dashed #aaa;
            > color: #333;
            > }
            > #filters
            ul {
            > list-style: none;
            > margin: 0;
            > padding: 0;
            >
            }
            > </style>
            > </head>
            > <body
            class="yui-skin- sam">
            >
            > <div
            class="markup" >
            > <h3 id="cur"></h3>
            > <div
            class="col">
            > <div id="pag"></div>
            > <div
            id="tbl"></div>
            > </div>
            > <div id="filters"
            class="col">
            > <h4>Filter by</h4>
            >
            >
            <ul>
            > <li><a
            href="?filter= ">All</a> </li>
            > <li><a
            href="?filter= foo">Foo< /a></li>
            > <li><a
            href="?filter= bar">Bar< /a></li>
            > <li><a
            href="?filter= baz">Baz< /a></li>
            > <li><a
            href="?filter= missing"> Missing</ a></li>
            >
            > </ul>
            > </div>
            > </div>
            >
            >
            <script type="text/javascri pt"
            >
            src="http://yui.yahooapi s.com/combo? 2.6.0/build/ yahoo-dom- event/yahoo- dom-event. js&2.6.0/ build/element/ element-beta. js&2.6.0/ build/datasource /datasource. js&2.6.0/ build/datatable/ datatable. js&2.6.0/ build/paginator/ paginator. js"></script>
            >
            <!--script type="text/javascri pt"
            >
            src="http://yui.yahooapi s.com/2.6. 0/build/yahoo- dom-event/ yahoo-dom- event.js"></script>
            >
            <script type="text/javascri pt"
            >
            src="http://yui.yahooapi s.com/2.6. 0/build/element/ element-beta. js"></script>
            >
            <script type="text/javascri pt"
            >
            src="http://yui.yahooapi s.com/2.6. 0/build/datasour ce/datasource. js"></script>
            >
            <script type="text/javascri pt"
            >
            src="http://yui.yahooapi s.com/2.6. 0/build/datatabl e/datatable. js"></script>
            >
            <script type="text/javascri pt"
            >
            src="http://yui.yahooapi s.com/2.6. 0/build/paginato r/paginator. js"></script-- >
            >
            <script type="text/javascri pt"
            >
            src="http://www.explodin gcow.com/ ~rivettmj/ coupondb/ coupon-feed. php"></script>
            >
            <script type="text/javascri pt">
            >
            YAHOO.util.Event. onDOMReady( function () {
            >
            > var Ex =
            YAHOO.namespace( 'example' ),
            > Event = YAHOO.util.Event,
            >
            Dom = YAHOO.util.Dom,
            > initialFilter =
            /filter=(\w* )/.test(location .search) ? RegExp.$1
            > :
            null,
            >
            > data = [],
            > i = 0;
            >
            alert(initialFilter );
            > // Load up the array with some arbitrary
            data
            > for (;i<500;++i) {
            > data[i] = {
            > 'foo': i,
            >
            'bar': 'bar:'+i,
            > 'type':
            ['foo','bar' ][(Math.random( )*2)|0]
            > };
            > }
            >
            data[9].type = data[270].type = data[284].type = data[485].type = 'baz';
            >
            >
            > //data[0] = {
            > // 'id': '1',
            > // 'upc':
            '536632700501' ,
            > // 'value': '1',
            > // 'quantity': 'Off Any
            4pack',
            > // 'linkable': 'true',
            > // 'link':
            'httprivettorg' ,
            > // 'approved': 'true',
            > //
            'expiration' : '12-31-2008' ,
            > // 'origin': 'SS 92108',
            >
            // 'flagable': 'False',
            > // 'flagreason' : '',
            > // 'deleted':
            'False'
            > //};
            > //i=1;
            > //alert(data[ 0].upc);
            >
            >
            > //Ex.filter = function (upc) {
            > //
            alert(data.length) ;
            > // if (!upc || !upc.length) {
            > //
            alert('foo') ;
            > // return data;
            > //}
            >
            > // var
            results = [];
            > // for (var i=0,j=0,l=data. length; i<l ; ++i)
            {
            > // alert('found! ');
            > //if (data[i].upc == upc) {
            >
            //
            > //results[j+ +] = data[i];
            > // }
            > //}
            >
            //return results;
            > //};
            >
            > Ex.filter = function (type)
            {
            > alert(data.length) ;
            > if (!type || !type.length) {
            >
            return data;
            > }
            >
            > var results = [];
            > for (var
            i=0,j=0,l=data. length; i<l ; ++i) {
            > if (data[i].type == type)
            {
            > results[j++] = data[i];
            > }
            > }
            > return
            results;
            > };
            >
            > Ex.dataSource = new
            YAHOO.util.DataSour ce(YAHOO. Couponfeed. coupons);
            >
            Ex.dataSource. responseType = YAHOO.util.DataSour ce.TYPE_JSARRAY;
            >
            Ex.dataSource. responseSchema = {
            > fields : ["id", "upc",
            "description" , "value", "quantity",
            > "linkable", "link", "approved",
            "expiration" , "origin", "flagable",
            > "flagged", "flagreason" ,
            "deleted"]
            > };
            >
            > Ex.paginator = new
            YAHOO.widget. Paginator( {
            > containers : 'pag',
            >
            alwaysVisible : false,
            > template : '{FirstPageLink} {PreviousPageLink}
            {NextPageLink}
            > {LastPageLink} ',
            > firstPageLinkLabel :
            'First',
            > lastPageLinkLabel : 'Last',
            > previousPageLinkLab el
            : 'Prev',
            > nextPageLinkLabel : 'Next',
            > rowsPerPage : 10
            >
            });
            >
            > Ex.paginator. subscribe( 'rendered' ,function
            () {
            > var report = new
            >
            YAHOO.widget. Paginator. ui.CurrentPageRe port(Ex.paginato r);
            >
            Dom.get('cur' ).appendChild( report.render( 'my'));
            >
            });
            >
            > Ex.dataTable = new
            YAHOO.widget. DataTable( 'tbl',
            > [ {key:"upc", sortable:true,
            resizeable:true} ,
            > {key:"expiration" ,
            formatter:YAHOO. widget.DataTable .formatDate,
            >
            sortable:true,
            >
            sortOptions: {defaultDir: YAHOO.widget. DataTable. CLASS_DESC} ,resizeable: true},
            >
            {key:"description" , sortable:true, resizeable:true} ,
            >
            {key:"value" , sortable:true, resizeable:true} ,
            >
            {key:"quantity" , sortable:true, resizeable:true} ,
            >
            {key:"origin" , sortable:true, resizeable:true} ,
            > {key:"link",
            sortable:true, resizeable:true}
            > ],
            > Ex.dataSource,
            >
            {
            > paginator: Ex.paginator,
            > initialRequest :
            initialFilter
            > });
            >
            > Ex.callback = {
            > success :
            Ex.dataTable. onDataReturnInit ializeTable,
            > failure :
            Ex.dataTable. onDataReturnInit ializeTable,
            > scope :
            Ex.dataTable
            > };
            >
            >
            Event.on('filters' ,'click', function (e) {
            > var target =
            Event.getTarget( e),
            > sort =
            Ex.dataTable. get('sortedBy' ),
            > filter;
            >
            //alert(target. nodeName. toLowerCase( ));
            > if
            (target.nodeName. toLowerCase( ) == 'a') {
            >
            Event.preventDefaul t(e);
            >
            > if (sort) {
            > // Sort the
            source data
            > var asc = (sort.dir.indexOf( 'asc') !== -1),
            > k =
            sort.key;
            > data.sort(function (a,b) {
            > return
            a[k]===b[k]? 0:(a[k]<b[ k]?(asc?- 1:1):(asc? 1:-1));
            >
            });
            >
            > // Pass the sort info in the payload to reset sortedBy
            after
            > // initializeTable clears it.
            > Ex.callback. argument =
            {
            > sortKey : sort.key,
            > sortDir : sort.dir
            > };
            > }
            else {
            > Ex.callback. argument = {};
            > }
            > filter =
            /filter=(\w* )/.test(target. href) ? RegExp.$1 : null;
            >
            Ex.dataSource. sendRequest( filter,Ex. callback) ;
            >
            }
            >
            > });
            >
            > });
            > </script>
            >
            <script type="text/javascri pt" src="../assets/ dpSyntaxHighligh ter.js"
            > ></script>
            > <script type="text/javascri pt"
            >
            src="../assets/ dpSyntaxHighligh tExample. js"></script>
            >
            </body>
            > </html>
            >
            >
            > --- In
            href="mailto:ydn-javascript%40yahoogroups.com">ydn-javascript@ yahoogroups. com, "Lucas Smith" <lsmith@> wrote:
            > >
            > > Mike,
            > >
            > > It looks like you're mixing 2.5.1 sources and 2.6.0
            paradigms
            > > (dynamicData) . I recommend using 2.6.0. I've
            uploaded a new version
            > > of the filtering example to
            > >
            >
            http://yuiblog. com/sandbox/ yui/v260/ examples/ datatable/ filter_func_ pag.html
            > >
            > > for you to look at. The important thing to note is that
            unless the
            > > callback object passed to
            myDataSource. sendRequest( req,callback)
            > > includes an
            'argument' property, the Paginator's values won't get
            > > updated.
            E.g.
            > >
            > > ds.sendRequest( data, {
            > >
            success: dt.onDataReturnSetR ows,
            > > scope: dt,
            > >
            argument: {}
            > > });
            > >
            > > will update the
            Paginator, while
            > >
            > > ds.sendRequest( data, {
            > > success: dt.onDataReturnSetR ows,
            > > scope: dt
            > >
            });
            > >
            > > won't.
            > >
            > > It's an odd
            condition, that if you find troubling, please submit a bug
            > > on
            SourceForge.
            > >
            > > Anyway, I hope this helps. If not, keep
            asking and we'll get it
            > > figured out!
            > >
            > >
            Luke
            > >
            > > --- In
            href="mailto:ydn-javascript%40yahoogroups.com">ydn-javascript@ yahoogroups. com, "rivettmj" <rivettmj@> wrote:
            > > >
            > > > I've
            been continuing to play with the pagination functions and have
            > > >
            almost got it working, the only thing that does not work at the
            > > > moment, is the number of pages in the data set does not update
            > > > correctly (the initial data load has three pages, and if you
            filter it
            > > > down, it still shows three pages in the smaller table, two
            of which
            > > > are empty) I just know I'm missing something simple
            at this point
            > > > (being able to tell the pagination object
            'please refresh!')
            > > >
            > > > Here is the updated
            code I'm working with:
            > > >
            > > > <html>
            > > > <head>
            > > > <title>Test
            Page</title>
            > > > <link type="text/css"
            rel="stylesheet"
            > > >
            href="../assets/ dpSyntaxHighligh ter.css">
            > > >
            <link rel="stylesheet" type="text/css"
            > > >
            > >
            >
            href="http://yui.yahooapi s.com/2.5. 1/build/datatabl e/assets/ skins/sam/ datatable. css">
            > > > <style type="text/css" >
            > > > body {
            > > > font: normal .9em/1.3 Arial, sans-serif;
            > > > }
            > > > .origin {
            > > > display: block;
            > > >
            background: #795089;
            > > > padding: 1ex;
            > > > color:
            #fff;
            > > > text-align: right;
            > > > margin-bottom:
            1em;
            > > > }
            > > > label {
            > > > display:
            block;
            > > > margin-bottom: 1em;
            > > > }
            > > > </style>
            > > > </head>
            > > > <body
            class="yui-skin- sam">
            > > > <a class="origin"
            > > >
            > >
            >
            href="http://tech. groups.yahoo. com/group/ ydn-javascript/ message/29679">ydn-js
            > > > origin</a>
            > > >
            > > > <div
            class="markup" >
            > > > <label
            for="filter" >Show
            > > > <select id="filter">
            > > > <option value="0">all records</option>
            > > >
            <option value="10">Items with Quantity &gt; 10</option>
            > > > <option value="50">Items with Quantity &gt;
            50</option>
            > > >
            > > > <option
            value="75">Items with Quantity &gt; 75</option>
            > > >
            <option value="100"> Items with Quantity &gt;
            100</option>
            > > > <option
            value="200"> Items with Quantity &gt;
            200</option>
            > > > </select>
            > > >
            > > >
            </label>
            > > > <div id="tbl"></div>
            > > > </div>
            > > >
            > > > <script
            type="text/javascri pt"
            > > >
            > >
            >
            src="http://yui.yahooapi s.com/2.5. 1/build/yahoo- dom-event/ yahoo-dom- event.js"></script>
            > > > <script type="text/javascri pt"
            > > >
            > >
            >
            src="http://yui.yahooapi s.com/2.5. 1/build/element/ element-beta. js"></script>
            > > > <script type="text/javascri pt"
            > > >
            src="../../build/ paginator/ paginator- min.js">< /script>
            > > > <link rel="stylesheet" type="text/css"
            > > >
            href="../../ build/paginator/ assets/skins/ sam/paginator. css" />
            > > >
            > > >
            > > > <script
            type="text/javascri pt"
            > > >
            > >
            >
            src="http://yui.yahooapi s.com/2.5. 1/build/datasour ce/datasource- beta.js"></script>
            > > > <script type="text/javascri pt"
            > > >
            > >
            >
            src="http://yui.yahooapi s.com/2.5. 1/build/datatabl e/datatable- beta.js"></script>
            > > > <script type="text/javascri pt"
            > > >
            > >
            >
            src="http://developer. yahoo.com/ yui/examples/ datatable/ assets/js/ data.js"></script>
            > > > <script type="text/javascri pt">
            > > >
            YAHOO.util.Event. onDOMReady( function () {
            > > >
            > > > var Ex = YAHOO.namespace( 'example' ),
            > > > data
            = YAHOO.example. Data.inventory,
            > > > totrec = 0;
            > > >
            > > > var myFilter = function (min) {
            > > > var
            results = [];
            > > > totrec = 0;
            > > > for (var
            i=0,l=data.length; i<l; ++i) {
            > > > if (data[i].Quantity >
            min) {
            > > > results.push( data[i]);
            > > > totrec =
            totrec + 1;
            > > > }
            > > > }
            > > >
            > > > // Generate an oResponse object
            > > > alert(totrec+ "
            "+min);
            > > > //myDataTable. totalRecords = totrec;
            > > > return results;
            > > > };
            > > >
            > > >
            Ex.dataSource = new YAHOO.util.DataSour ce(myFilter) ;
            > > >
            Ex.dataSource. responseType = YAHOO.util.DataSour ce.TYPE_JSARRAY;
            > > >
            Ex.dataSource. responseSchema = {
            > > > fields :
            ['SKU','Quantity' ,'Item',' Description' ]
            > > >
            };
            > > >
            > > > var myConfigs = {
            > > >
            initialRequest: 0, // Initial request for first page
            > > > of
            data
            > > > dynamicData: true, // Enables dynamic
            >
            server-driven data
            > > > sortedBy : {key:"SKU",
            > > >
            dir:YAHOO.widget. DataTable. CLASS_ASC} , // Sets UI initial sort arrow
            > > > paginator: new
            YAHOO.widget. Paginator( {
            rowsPerPage: 5
            > > > }) //
            Enables pagination
            > > > };
            > > >
            > > >
            Ex.dataTable = new YAHOO.widget. DataTable( 'tbl', [
            > > >
            {key:'SKU'}, {key:'Quantity' },{key:'Item' },{key:'Descript ion'}
            > > > ],Ex.dataSource, myConfigs) ;
            > > >
            > > > Ex.callback = {
            > > > success :
            Ex.dataTable. onDataReturnInit ializeTable,
            > > > failure :
            Ex.dataTable. onDataReturnInit ializeTable,
            > > > scope :
            Ex.dataTable
            > > > };
            > > >
            > > >
            YAHOO.util.Event. on('filter' ,'change' ,function (e) {
            > > > var min =
            parseInt(this. options[this. selectedIndex] .value,10) ;
            > > > Ex.dataSource. sendRequest( min, Ex.callback) ;
            > > > });
            > > >
            > > > });
            > > >
            > > > </script>
            > > > <script
            type="text/javascri pt"
            src="../assets/ dpSyntaxHighligh ter.js"
            > > > ></script>
            > > > <script
            type="text/javascri pt"
            > > >
            src="../assets/ dpSyntaxHighligh tExample. js"></script>
            > > > </body>
            > > > </html>
            > > >
            > > >
            > > > --- In
            href="mailto:ydn-javascript%40yahoogroups.com">ydn-javascript@ yahoogroups. com, "rivettmj" <rivettmj@> wrote:
            > > > >
            > > > > Hello again, I've had a lot of success building a datatable
            > that
            you
            > > > > can filter by searching user entered form data,
            however I've been
            > > > > unsuccessful getting Paginator to play
            with it (it works for the
            > > > > initial page, but breaks when
            the number of items in the table
            > > > > changes. I assume that
            this is because it has no way of
            > 'knowing' how
            > > > >
            many items are getting displayed. I've found a couple of smalled
            > > > > examples of dynamic tables, and am now trying to get Paginator
            >
            to work
            > > > > with then before trying to integrate this feature
            into the more
            > > > > complex page I already have. here is the
            example I'm trying
            to get
            > > > > working:
            > > > >
            > > > >
            > > >
            > >
            >
            http://www.explodin gcow.com/ ~rivettmj/ yui/examples/ datatable/ yuiblog.html
            > > > >
            > > > > I've tried *many* different combination
            of the
            > > > >
            href="http://developer.yahoo.com/yui/docs/YAHOO.widget.Paginator.html">http://developer. yahoo.com/ yui/docs/ YAHOO.widget. Paginator. html
            > > > > methods, none seem to work. (I figure what I want to provide
            is
            > really
            > > > > 'serverside' data display, but using a
            local JSARRAY for data)
            > > > >
            > > > > I have
            the page currently building a variable called totrec, that
            > > > > always returns the number of items in the table, I'm just not
            > sure
            how
            > > > > to tell the paginator about them :)
            > > > >
            > > > > Any help from the masters of YUI would be greatly
            appreciated!
            > > > >
            > > > > -- Mike
            > > > >
            > > >
            > >
            >

          • Lucas Smith
            Eric, The filter function in the example looks for the input content as the start of the state string, but that rule is arbitrary. The filtering function is
            Message 5 of 9 , Jan 5, 2009
            • 0 Attachment
              Eric,

              The filter function in the example looks for the input content as the
              start of the state string, but that rule is arbitrary. The filtering
              function is easy enough to customize according to your needs.

              Luke

              --- In ydn-javascript@yahoogroups.com, "a Eric Daniel Leon Gonzalez"
              <gonzalez@...> wrote:
              >
              > Good example, but why it doesn't work for a input: 'w J'??
              >
              > My expected is get "New Jersey".
              >
              > Thanks,
              > Eric
              >
              > ________________________________
              >
              > From: ydn-javascript@yahoogroups.com
              > [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Lucas Smith
              > Sent: Monday, January 05, 2009 9:53 AM
              > To: ydn-javascript@yahoogroups.com
              > Subject: [ydn-javascript] Re: Paginator with datatable using dynamic
              > (filtered) localdata
              >
              >
              >
              > I've uploaded another example that simplifies the filtering operation.
              > http://yuiblog.com/sandbox/yui/v260/examples/datatable/filtered.html
              > <http://yuiblog.com/sandbox/yui/v260/examples/datatable/filtered.html>
              >
              > Try working from this one and see if it makes more sense.
              >
              > Luke
              >
              > --- In ydn-javascript@yahoogroups.com
              > <mailto:ydn-javascript%40yahoogroups.com> , "rivettmj" <rivettmj@>
              > wrote:
              > >
              > > Well sir, I have taken your example and managed to totally break it
              > ...
              > >
              > > (There are a couple of attempts to customize it for learning that are
              > > commented out)
              > >
              > > what I don't quite get is why the code below does not filter when you
              > > change Ex.filter = function (type) { to Ex.filter = function (upc) {
              > > (I know it wont work 'correctly' but it should at least work for
              > > 'missing' right?)
              > >
              > > The other question I have is: is there an easy way to fill the data[]
              > > array with the data from the dataTable? (it seems like reinventing the
              > > wheel to me?) I cant seem to find an easy way to pull the data from a
              > > dataTable after loading it (I was thinking of a simple for loop going
              > > from 0 to the number of rows, and then simply dump row[i].values to
              > > data[i].values ...)
              > >
              > > I'm more used to C code, so all these objects are making my head hurt
              > ;)
              > >
              > > <html>
              > > <head>
              > > <title>Test Page</title>
              > > <link type="text/css" rel="stylesheet"
              > > href="../assets/dpSyntaxHighlighter.css">
              > > <link rel="stylesheet" type="text/css"
              > >
              > href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/da
              > tatable.css
              > <http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatab
              > le.css> ">
              > > <link rel="stylesheet" type="text/css"
              > >
              > href="http://yui.yahooapis.com/2.6.0/build/paginator/assets/skins/sam/pa
              > ginator.css
              > <http://yui.yahooapis.com/2.6.0/build/paginator/assets/skins/sam/paginat
              > or.css> ">
              > > <style type="text/css">
              > > body {
              > > font: normal .88em/1.4 Arial, sans-serif;
              > > }
              > > .markup {
              > > clear: both;
              > > border-bottom: 1px solid #ccc;
              > > padding-bottom: 1em;
              > > overflow: hidden;
              > > }
              > > h2 {
              > > clear: both;
              > > }
              > > #cur {
              > > width: 18em;
              > > text-align: right;
              > > border-bottom: 3px solid #333;
              > > color: #333;
              > > margin-bottom: .2em;
              > > }
              > > #cur span {
              > > margin: 0;
              > > }
              > > .col {
              > > width: 63em;
              > > display: inline;
              > > float: left;
              > > padding-left: 1em;
              > > }
              > > #filters {
              > > width: 5.8em;
              > > }
              > > #filters h4 {
              > > margin: 0;
              > > line-height: 225%;
              > > border-bottom: 1px dashed #aaa;
              > > color: #333;
              > > }
              > > #filters ul {
              > > list-style: none;
              > > margin: 0;
              > > padding: 0;
              > > }
              > > </style>
              > > </head>
              > > <body class="yui-skin-sam">
              > >
              > > <div class="markup">
              > > <h3 id="cur"></h3>
              > > <div class="col">
              > > <div id="pag"></div>
              > > <div id="tbl"></div>
              > > </div>
              > > <div id="filters" class="col">
              > > <h4>Filter by</h4>
              > >
              > > <ul>
              > > <li><a href="?filter=">All</a></li>
              > > <li><a href="?filter=foo">Foo</a></li>
              > > <li><a href="?filter=bar">Bar</a></li>
              > > <li><a href="?filter=baz">Baz</a></li>
              > > <li><a href="?filter=missing">Missing</a></li>
              > >
              > > </ul>
              > > </div>
              > > </div>
              > >
              > > <script type="text/javascript"
              > >
              > src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-do
              > m-event.js&2.6.0/build/element/element-beta.js&2.6.0/build/datasource/da
              > tasource.js&2.6.0/build/datatable/datatable.js&2.6.0/build/paginator/pag
              > inator.js
              > <http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-ev
              > ent.js&2.6.0/build/element/element-beta.js&2.6.0/build/datasource/dataso
              > urce.js&2.6.0/build/datatable/datatable.js&2.6.0/build/paginator/paginat
              > or.js> "></script>
              > > <!--script type="text/javascript"
              > >
              > src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-even
              > t.js
              > <http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js
              > > "></script>
              > > <script type="text/javascript"
              > >
              > src="http://yui.yahooapis.com/2.6.0/build/element/element-beta.js
              > <http://yui.yahooapis.com/2.6.0/build/element/element-beta.js>
              > "></script>
              > > <script type="text/javascript"
              > >
              > src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource.js
              > <http://yui.yahooapis.com/2.6.0/build/datasource/datasource.js>
              > "></script>
              > > <script type="text/javascript"
              > >
              > src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable.js
              > <http://yui.yahooapis.com/2.6.0/build/datatable/datatable.js>
              > "></script>
              > > <script type="text/javascript"
              > >
              > src="http://yui.yahooapis.com/2.6.0/build/paginator/paginator.js
              > <http://yui.yahooapis.com/2.6.0/build/paginator/paginator.js>
              > "></script-->
              > > <script type="text/javascript"
              > >
              > src="http://www.explodingcow.com/~rivettmj/coupondb/coupon-feed.php
              > <http://www.explodingcow.com/~rivettmj/coupondb/coupon-feed.php>
              > "></script>
              > > <script type="text/javascript">
              > > YAHOO.util.Event.onDOMReady(function () {
              > >
              > > var Ex = YAHOO.namespace('example'),
              > > Event = YAHOO.util.Event,
              > > Dom = YAHOO.util.Dom,
              > > initialFilter = /filter=(\w*)/.test(location.search) ? RegExp.$1
              > > : null,
              > >
              > > data = [],
              > > i = 0;
              > > alert(initialFilter);
              > > // Load up the array with some arbitrary data
              > > for (;i<500;++i) {
              > > data[i] = {
              > > 'foo': i,
              > > 'bar': 'bar:'+i,
              > > 'type': ['foo','bar'][(Math.random()*2)|0]
              > > };
              > > }
              > > data[9].type = data[270].type = data[284].type = data[485].type =
              > 'baz';
              > >
              > >
              > > //data[0] = {
              > > // 'id': '1',
              > > // 'upc': '536632700501',
              > > // 'value': '1',
              > > // 'quantity': 'Off Any 4pack',
              > > // 'linkable': 'true',
              > > // 'link': 'httprivettorg',
              > > // 'approved': 'true',
              > > // 'expiration': '12-31-2008',
              > > // 'origin': 'SS 92108',
              > > // 'flagable': 'False',
              > > // 'flagreason': '',
              > > // 'deleted': 'False'
              > > //};
              > > //i=1;
              > > //alert(data[0].upc);
              > >
              > >
              > > //Ex.filter = function (upc) {
              > > // alert(data.length);
              > > // if (!upc || !upc.length) {
              > > // alert('foo');
              > > // return data;
              > > //}
              > >
              > > // var results = [];
              > > // for (var i=0,j=0,l=data.length; i<l ; ++i) {
              > > // alert('found!');
              > > //if (data[i].upc == upc) {
              > > //
              > > //results[j++] = data[i];
              > > // }
              > > //}
              > > //return results;
              > > //};
              > >
              > > Ex.filter = function (type) {
              > > alert(data.length);
              > > if (!type || !type.length) {
              > > return data;
              > > }
              > >
              > > var results = [];
              > > for (var i=0,j=0,l=data.length; i<l ; ++i) {
              > > if (data[i].type == type) {
              > > results[j++] = data[i];
              > > }
              > > }
              > > return results;
              > > };
              > >
              > > Ex.dataSource = new YAHOO.util.DataSource(YAHOO.Couponfeed.coupons);
              > > Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
              > > Ex.dataSource.responseSchema = {
              > > fields : ["id", "upc", "description", "value", "quantity",
              > > "linkable", "link", "approved", "expiration", "origin", "flagable",
              > > "flagged", "flagreason", "deleted"]
              > > };
              > >
              > > Ex.paginator = new YAHOO.widget.Paginator({
              > > containers : 'pag',
              > > alwaysVisible : false,
              > > template : '{FirstPageLink} {PreviousPageLink} {NextPageLink}
              > > {LastPageLink}',
              > > firstPageLinkLabel : 'First',
              > > lastPageLinkLabel : 'Last',
              > > previousPageLinkLabel : 'Prev',
              > > nextPageLinkLabel : 'Next',
              > > rowsPerPage : 10
              > > });
              > >
              > > Ex.paginator.subscribe('rendered',function () {
              > > var report = new
              > > YAHOO.widget.Paginator.ui.CurrentPageReport(Ex.paginator);
              > > Dom.get('cur').appendChild(report.render('my'));
              > > });
              > >
              > > Ex.dataTable = new YAHOO.widget.DataTable('tbl',
              > > [ {key:"upc", sortable:true, resizeable:true},
              > > {key:"expiration", formatter:YAHOO.widget.DataTable.formatDate,
              > > sortable:true,
              > >
              > sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:tr
              > ue},
              > > {key:"description", sortable:true, resizeable:true},
              > > {key:"value", sortable:true, resizeable:true},
              > > {key:"quantity", sortable:true, resizeable:true},
              > > {key:"origin", sortable:true, resizeable:true},
              > > {key:"link", sortable:true, resizeable:true}
              > > ],
              > > Ex.dataSource,
              > > {
              > > paginator: Ex.paginator,
              > > initialRequest : initialFilter
              > > });
              > >
              > > Ex.callback = {
              > > success : Ex.dataTable.onDataReturnInitializeTable,
              > > failure : Ex.dataTable.onDataReturnInitializeTable,
              > > scope : Ex.dataTable
              > > };
              > >
              > > Event.on('filters','click',function (e) {
              > > var target = Event.getTarget(e),
              > > sort = Ex.dataTable.get('sortedBy'),
              > > filter;
              > > //alert(target.nodeName.toLowerCase());
              > > if (target.nodeName.toLowerCase() == 'a') {
              > > Event.preventDefault(e);
              > >
              > > if (sort) {
              > > // Sort the source data
              > > var asc = (sort.dir.indexOf('asc') !== -1),
              > > k = sort.key;
              > > data.sort(function (a,b) {
              > > return a[k]===b[k]?0:(a[k]<b[k]?(asc?-1:1):(asc?1:-1));
              > > });
              > >
              > > // Pass the sort info in the payload to reset sortedBy after
              > > // initializeTable clears it.
              > > Ex.callback.argument = {
              > > sortKey : sort.key,
              > > sortDir : sort.dir
              > > };
              > > } else {
              > > Ex.callback.argument = {};
              > > }
              > > filter = /filter=(\w*)/.test(target.href) ? RegExp.$1 : null;
              > > Ex.dataSource.sendRequest(filter,Ex.callback);
              > > }
              > >
              > > });
              > >
              > > });
              > > </script>
              > > <script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"
              > > ></script>
              > > <script type="text/javascript"
              > > src="../assets/dpSyntaxHighlightExample.js"></script>
              > > </body>
              > > </html>
              > >
              > >
              > > --- In ydn-javascript@yahoogroups.com
              > <mailto:ydn-javascript%40yahoogroups.com> , "Lucas Smith" <lsmith@>
              > wrote:
              > > >
              > > > Mike,
              > > >
              > > > It looks like you're mixing 2.5.1 sources and 2.6.0 paradigms
              > > > (dynamicData). I recommend using 2.6.0. I've uploaded a new version
              > > > of the filtering example to
              > > >
              > >
              > http://yuiblog.com/sandbox/yui/v260/examples/datatable/filter_func_pag.h
              > tml
              > <http://yuiblog.com/sandbox/yui/v260/examples/datatable/filter_func_pag.
              > html>
              > > >
              > > > for you to look at. The important thing to note is that unless the
              > > > callback object passed to myDataSource.sendRequest(req,callback)
              > > > includes an 'argument' property, the Paginator's values won't get
              > > > updated. E.g.
              > > >
              > > > ds.sendRequest(data, {
              > > > success: dt.onDataReturnSetRows,
              > > > scope: dt,
              > > > argument: {}
              > > > });
              > > >
              > > > will update the Paginator, while
              > > >
              > > > ds.sendRequest(data, {
              > > > success: dt.onDataReturnSetRows,
              > > > scope: dt
              > > > });
              > > >
              > > > won't.
              > > >
              > > > It's an odd condition, that if you find troubling, please submit a
              > bug
              > > > on SourceForge.
              > > >
              > > > Anyway, I hope this helps. If not, keep asking and we'll get it
              > > > figured out!
              > > >
              > > > Luke
              > > >
              > > > --- In ydn-javascript@yahoogroups.com
              > <mailto:ydn-javascript%40yahoogroups.com> , "rivettmj" <rivettmj@>
              > wrote:
              > > > >
              > > > > I've been continuing to play with the pagination functions and
              > have
              > > > > almost got it working, the only thing that does not work at the
              > > > > moment, is the number of pages in the data set does not update
              > > > > correctly (the initial data load has three pages, and if you
              > filter it
              > > > > down, it still shows three pages in the smaller table, two of
              > which
              > > > > are empty) I just know I'm missing something simple at this point
              > > > > (being able to tell the pagination object 'please refresh!')
              > > > >
              > > > > Here is the updated code I'm working with:
              > > > >
              > > > > <html>
              > > > > <head>
              > > > > <title>Test Page</title>
              > > > > <link type="text/css" rel="stylesheet"
              > > > > href="../assets/dpSyntaxHighlighter.css">
              > > > > <link rel="stylesheet" type="text/css"
              > > > >
              > > >
              > >
              > href="http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/da
              > tatable.css
              > <http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatab
              > le.css> ">
              > > > > <style type="text/css">
              > > > > body {
              > > > > font: normal .9em/1.3 Arial, sans-serif;
              > > > > }
              > > > > .origin {
              > > > > display: block;
              > > > > background: #795089;
              > > > > padding: 1ex;
              > > > > color: #fff;
              > > > > text-align: right;
              > > > > margin-bottom: 1em;
              > > > > }
              > > > > label {
              > > > > display: block;
              > > > > margin-bottom: 1em;
              > > > > }
              > > > > </style>
              > > > > </head>
              > > > > <body class="yui-skin-sam">
              > > > > <a class="origin"
              > > > >
              > > >
              > >
              > href="http://tech.groups.yahoo.com/group/ydn-javascript/message/29679
              > <http://tech.groups.yahoo.com/group/ydn-javascript/message/29679>
              > ">ydn-js
              > > > > origin</a>
              > > > >
              > > > > <div class="markup">
              > > > > <label for="filter">Show
              > > > > <select id="filter">
              > > > > <option value="0">all records</option>
              > > > > <option value="10">Items with Quantity > 10</option>
              > > > > <option value="50">Items with Quantity > 50</option>
              > > > >
              > > > > <option value="75">Items with Quantity > 75</option>
              > > > > <option value="100">Items with Quantity >
              > 100</option>
              > > > > <option value="200">Items with Quantity >
              > 200</option>
              > > > > </select>
              > > > >
              > > > > </label>
              > > > > <div id="tbl"></div>
              > > > > </div>
              > > > >
              > > > > <script type="text/javascript"
              > > > >
              > > >
              > >
              > src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-even
              > t.js
              > <http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js
              > > "></script>
              > > > > <script type="text/javascript"
              > > > >
              > > >
              > >
              > src="http://yui.yahooapis.com/2.5.1/build/element/element-beta.js
              > <http://yui.yahooapis.com/2.5.1/build/element/element-beta.js>
              > "></script>
              > > > > <script type="text/javascript"
              > > > > src="../../build/paginator/paginator-min.js"></script>
              > > > > <link rel="stylesheet" type="text/css"
              > > > > href="../../build/paginator/assets/skins/sam/paginator.css" />
              > > > >
              > > > >
              > > > > <script type="text/javascript"
              > > > >
              > > >
              > >
              > src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta.js
              > <http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta.js>
              > "></script>
              > > > > <script type="text/javascript"
              > > > >
              > > >
              > >
              > src="http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta.js
              > <http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta.js>
              > "></script>
              > > > > <script type="text/javascript"
              > > > >
              > > >
              > >
              > src="http://developer.yahoo.com/yui/examples/datatable/assets/js/data.js
              > <http://developer.yahoo.com/yui/examples/datatable/assets/js/data.js>
              > "></script>
              > > > > <script type="text/javascript">
              > > > > YAHOO.util.Event.onDOMReady(function () {
              > > > >
              > > > > var Ex = YAHOO.namespace('example'),
              > > > > data = YAHOO.example.Data.inventory,
              > > > > totrec = 0;
              > > > >
              > > > > var myFilter = function (min) {
              > > > > var results = [];
              > > > > totrec = 0;
              > > > > for (var i=0,l=data.length; i<l; ++i) {
              > > > > if (data[i].Quantity > min) {
              > > > > results.push(data[i]);
              > > > > totrec = totrec + 1;
              > > > > }
              > > > > }
              > > > >
              > > > > // Generate an oResponse object
              > > > > alert(totrec+" "+min);
              > > > > //myDataTable.totalRecords = totrec;
              > > > > return results;
              > > > > };
              > > > >
              > > > > Ex.dataSource = new YAHOO.util.DataSource(myFilter);
              > > > > Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
              > > > > Ex.dataSource.responseSchema = {
              > > > > fields : ['SKU','Quantity','Item','Description']
              > > > > };
              > > > >
              > > > > var myConfigs = {
              > > > > initialRequest: 0, // Initial request for first page
              > > > > of data
              > > > > dynamicData: true, // Enables dynamic
              > > server-driven data
              > > > > sortedBy : {key:"SKU",
              > > > > dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort
              > arrow
              > > > > paginator: new YAHOO.widget.Paginator({
              > rowsPerPage:5
              > > > > }) // Enables pagination
              > > > > };
              > > > >
              > > > > Ex.dataTable = new YAHOO.widget.DataTable('tbl', [
              > > > > {key:'SKU'},{key:'Quantity'},{key:'Item'},{key:'Description'}
              > > > > ],Ex.dataSource,myConfigs);
              > > > >
              > > > > Ex.callback = {
              > > > > success : Ex.dataTable.onDataReturnInitializeTable,
              > > > > failure : Ex.dataTable.onDataReturnInitializeTable,
              > > > > scope : Ex.dataTable
              > > > > };
              > > > >
              > > > > YAHOO.util.Event.on('filter','change',function (e) {
              > > > > var min = parseInt(this.options[this.selectedIndex].value,10);
              > > > > Ex.dataSource.sendRequest(min, Ex.callback);
              > > > > });
              > > > >
              > > > > });
              > > > >
              > > > > </script>
              > > > > <script type="text/javascript"
              > src="../assets/dpSyntaxHighlighter.js"
              > > > > ></script>
              > > > > <script type="text/javascript"
              > > > > src="../assets/dpSyntaxHighlightExample.js"></script>
              > > > > </body>
              > > > > </html>
              > > > >
              > > > >
              > > > > --- In ydn-javascript@yahoogroups.com
              > <mailto:ydn-javascript%40yahoogroups.com> , "rivettmj" <rivettmj@>
              > wrote:
              > > > > >
              > > > > > Hello again, I've had a lot of success building a datatable
              > > that you
              > > > > > can filter by searching user entered form data, however I've
              > been
              > > > > > unsuccessful getting Paginator to play with it (it works for the
              > > > > > initial page, but breaks when the number of items in the table
              > > > > > changes. I assume that this is because it has no way of
              > > 'knowing' how
              > > > > > many items are getting displayed. I've found a couple of smalled
              > > > > > examples of dynamic tables, and am now trying to get Paginator
              > > to work
              > > > > > with then before trying to integrate this feature into the more
              > > > > > complex page I already have. here is the example I'm trying
              > to get
              > > > > > working:
              > > > > >
              > > > > >
              > > > >
              > > >
              > >
              > http://www.explodingcow.com/~rivettmj/yui/examples/datatable/yuiblog.htm
              > l
              > <http://www.explodingcow.com/~rivettmj/yui/examples/datatable/yuiblog.ht
              > ml>
              > > > > >
              > > > > > I've tried *many* different combination of the
              > > > > > http://developer.yahoo.com/yui/docs/YAHOO.widget.Paginator.html
              > <http://developer.yahoo.com/yui/docs/YAHOO.widget.Paginator.html>
              > > > > > methods, none seem to work. (I figure what I want to provide is
              > > really
              > > > > > 'serverside' data display, but using a local JSARRAY for data)
              > > > > >
              > > > > > I have the page currently building a variable called totrec,
              > that
              > > > > > always returns the number of items in the table, I'm just not
              > > sure how
              > > > > > to tell the paginator about them :)
              > > > > >
              > > > > > Any help from the masters of YUI would be greatly appreciated!
              > > > > >
              > > > > > -- Mike
              > > > > >
              > > > >
              > > >
              > >
              >
            • Lucas Smith
              And in reply to your second question, the data in the DataTable is stored in its RecordSet. Read the section Object Model and DOM Overview here
              Message 6 of 9 , Jan 5, 2009
              • 0 Attachment
                And in reply to your second question, the data in the DataTable is
                stored in its RecordSet.

                Read the section "Object Model and DOM Overview" here
                http://developer.yahoo.com/yui/datatable/#start

                and the API docs:
                http://developer.yahoo.com/yui/docs/YAHOO.widget.RecordSet.html

                Hope this helps,
                Luke

                --- In ydn-javascript@yahoogroups.com, "rivettmj" <rivettmj@...> wrote:
                >
                > Well sir, I have taken your example and managed to totally break it ...
                >
                > (There are a couple of attempts to customize it for learning that are
                > commented out)
                >
                > what I don't quite get is why the code below does not filter when you
                > change Ex.filter = function (type) { to Ex.filter = function (upc) {
                > (I know it wont work 'correctly' but it should at least work for
                > 'missing' right?)
                >
                > The other question I have is: is there an easy way to fill the data[]
                > array with the data from the dataTable? (it seems like reinventing the
                > wheel to me?) I cant seem to find an easy way to pull the data from a
                > dataTable after loading it (I was thinking of a simple for loop going
                > from 0 to the number of rows, and then simply dump row[i].values to
                > data[i].values ...)
                >
                > I'm more used to C code, so all these objects are making my head hurt ;)
                >
                > <html>
                > <head>
                > <title>Test Page</title>
                > <link type="text/css" rel="stylesheet"
                > href="../assets/dpSyntaxHighlighter.css">
                > <link rel="stylesheet" type="text/css"
                >
                href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">
                > <link rel="stylesheet" type="text/css"
                >
                href="http://yui.yahooapis.com/2.6.0/build/paginator/assets/skins/sam/paginator.css">
                > <style type="text/css">
                > body {
                > font: normal .88em/1.4 Arial, sans-serif;
                > }
                > .markup {
                > clear: both;
                > border-bottom: 1px solid #ccc;
                > padding-bottom: 1em;
                > overflow: hidden;
                > }
                > h2 {
                > clear: both;
                > }
                > #cur {
                > width: 18em;
                > text-align: right;
                > border-bottom: 3px solid #333;
                > color: #333;
                > margin-bottom: .2em;
                > }
                > #cur span {
                > margin: 0;
                > }
                > .col {
                > width: 63em;
                > display: inline;
                > float: left;
                > padding-left: 1em;
                > }
                > #filters {
                > width: 5.8em;
                > }
                > #filters h4 {
                > margin: 0;
                > line-height: 225%;
                > border-bottom: 1px dashed #aaa;
                > color: #333;
                > }
                > #filters ul {
                > list-style: none;
                > margin: 0;
                > padding: 0;
                > }
                > </style>
                > </head>
                > <body class="yui-skin-sam">
                >
                > <div class="markup">
                > <h3 id="cur"></h3>
                > <div class="col">
                > <div id="pag"></div>
                > <div id="tbl"></div>
                > </div>
                > <div id="filters" class="col">
                > <h4>Filter by</h4>
                >
                > <ul>
                > <li><a href="?filter=">All</a></li>
                > <li><a href="?filter=foo">Foo</a></li>
                > <li><a href="?filter=bar">Bar</a></li>
                > <li><a href="?filter=baz">Baz</a></li>
                > <li><a href="?filter=missing">Missing</a></li>
                >
                > </ul>
                > </div>
                > </div>
                >
                > <script type="text/javascript"
                >
                src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/element/element-beta.js&2.6.0/build/datasource/datasource.js&2.6.0/build/datatable/datatable.js&2.6.0/build/paginator/paginator.js"></script>
                > <!--script type="text/javascript"
                >
                src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
                > <script type="text/javascript"
                >
                src="http://yui.yahooapis.com/2.6.0/build/element/element-beta.js"></script>
                > <script type="text/javascript"
                >
                src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource.js"></script>
                > <script type="text/javascript"
                >
                src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable.js"></script>
                > <script type="text/javascript"
                >
                src="http://yui.yahooapis.com/2.6.0/build/paginator/paginator.js"></script-->
                > <script type="text/javascript"
                >
                src="http://www.explodingcow.com/~rivettmj/coupondb/coupon-feed.php"></script>
                > <script type="text/javascript">
                > YAHOO.util.Event.onDOMReady(function () {
                >
                > var Ex = YAHOO.namespace('example'),
                > Event = YAHOO.util.Event,
                > Dom = YAHOO.util.Dom,
                > initialFilter = /filter=(\w*)/.test(location.search) ? RegExp.$1
                > : null,
                >
                > data = [],
                > i = 0;
                > alert(initialFilter);
                > // Load up the array with some arbitrary data
                > for (;i<500;++i) {
                > data[i] = {
                > 'foo': i,
                > 'bar': 'bar:'+i,
                > 'type': ['foo','bar'][(Math.random()*2)|0]
                > };
                > }
                > data[9].type = data[270].type = data[284].type = data[485].type = 'baz';
                >
                >
                > //data[0] = {
                > // 'id': '1',
                > // 'upc': '536632700501',
                > // 'value': '1',
                > // 'quantity': 'Off Any 4pack',
                > // 'linkable': 'true',
                > // 'link': 'httprivettorg',
                > // 'approved': 'true',
                > // 'expiration': '12-31-2008',
                > // 'origin': 'SS 92108',
                > // 'flagable': 'False',
                > // 'flagreason': '',
                > // 'deleted': 'False'
                > //};
                > //i=1;
                > //alert(data[0].upc);
                >
                >
                > //Ex.filter = function (upc) {
                > // alert(data.length);
                > // if (!upc || !upc.length) {
                > // alert('foo');
                > // return data;
                > //}
                >
                > // var results = [];
                > // for (var i=0,j=0,l=data.length; i<l ; ++i) {
                > // alert('found!');
                > //if (data[i].upc == upc) {
                > //
                > //results[j++] = data[i];
                > // }
                > //}
                > //return results;
                > //};
                >
                > Ex.filter = function (type) {
                > alert(data.length);
                > if (!type || !type.length) {
                > return data;
                > }
                >
                > var results = [];
                > for (var i=0,j=0,l=data.length; i<l ; ++i) {
                > if (data[i].type == type) {
                > results[j++] = data[i];
                > }
                > }
                > return results;
                > };
                >
                > Ex.dataSource = new YAHOO.util.DataSource(YAHOO.Couponfeed.coupons);
                > Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
                > Ex.dataSource.responseSchema = {
                > fields : ["id", "upc", "description", "value", "quantity",
                > "linkable", "link", "approved", "expiration", "origin", "flagable",
                > "flagged", "flagreason", "deleted"]
                > };
                >
                > Ex.paginator = new YAHOO.widget.Paginator({
                > containers : 'pag',
                > alwaysVisible : false,
                > template : '{FirstPageLink} {PreviousPageLink} {NextPageLink}
                > {LastPageLink}',
                > firstPageLinkLabel : 'First',
                > lastPageLinkLabel : 'Last',
                > previousPageLinkLabel : 'Prev',
                > nextPageLinkLabel : 'Next',
                > rowsPerPage : 10
                > });
                >
                > Ex.paginator.subscribe('rendered',function () {
                > var report = new
                > YAHOO.widget.Paginator.ui.CurrentPageReport(Ex.paginator);
                > Dom.get('cur').appendChild(report.render('my'));
                > });
                >
                > Ex.dataTable = new YAHOO.widget.DataTable('tbl',
                > [ {key:"upc", sortable:true, resizeable:true},
                > {key:"expiration", formatter:YAHOO.widget.DataTable.formatDate,
                > sortable:true,
                >
                sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
                > {key:"description", sortable:true, resizeable:true},
                > {key:"value", sortable:true, resizeable:true},
                > {key:"quantity", sortable:true, resizeable:true},
                > {key:"origin", sortable:true, resizeable:true},
                > {key:"link", sortable:true, resizeable:true}
                > ],
                > Ex.dataSource,
                > {
                > paginator: Ex.paginator,
                > initialRequest : initialFilter
                > });
                >
                > Ex.callback = {
                > success : Ex.dataTable.onDataReturnInitializeTable,
                > failure : Ex.dataTable.onDataReturnInitializeTable,
                > scope : Ex.dataTable
                > };
                >
                > Event.on('filters','click',function (e) {
                > var target = Event.getTarget(e),
                > sort = Ex.dataTable.get('sortedBy'),
                > filter;
                > //alert(target.nodeName.toLowerCase());
                > if (target.nodeName.toLowerCase() == 'a') {
                > Event.preventDefault(e);
                >
                > if (sort) {
                > // Sort the source data
                > var asc = (sort.dir.indexOf('asc') !== -1),
                > k = sort.key;
                > data.sort(function (a,b) {
                > return a[k]===b[k]?0:(a[k]<b[k]?(asc?-1:1):(asc?1:-1));
                > });
                >
                > // Pass the sort info in the payload to reset sortedBy after
                > // initializeTable clears it.
                > Ex.callback.argument = {
                > sortKey : sort.key,
                > sortDir : sort.dir
                > };
                > } else {
                > Ex.callback.argument = {};
                > }
                > filter = /filter=(\w*)/.test(target.href) ? RegExp.$1 : null;
                > Ex.dataSource.sendRequest(filter,Ex.callback);
                > }
                >
                > });
                >
                > });
                > </script>
                > <script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"
                > ></script>
                > <script type="text/javascript"
                > src="../assets/dpSyntaxHighlightExample.js"></script>
                > </body>
                > </html>
                >
                >
                > --- In ydn-javascript@yahoogroups.com, "Lucas Smith" <lsmith@> wrote:
                > >
                > > Mike,
                > >
                > > It looks like you're mixing 2.5.1 sources and 2.6.0 paradigms
                > > (dynamicData). I recommend using 2.6.0. I've uploaded a new version
                > > of the filtering example to
                > >
                >
                http://yuiblog.com/sandbox/yui/v260/examples/datatable/filter_func_pag.html
                > >
                > > for you to look at. The important thing to note is that unless the
                > > callback object passed to myDataSource.sendRequest(req,callback)
                > > includes an 'argument' property, the Paginator's values won't get
                > > updated. E.g.
                > >
                > > ds.sendRequest(data, {
                > > success: dt.onDataReturnSetRows,
                > > scope: dt,
                > > argument: {}
                > > });
                > >
                > > will update the Paginator, while
                > >
                > > ds.sendRequest(data, {
                > > success: dt.onDataReturnSetRows,
                > > scope: dt
                > > });
                > >
                > > won't.
                > >
                > > It's an odd condition, that if you find troubling, please submit a bug
                > > on SourceForge.
                > >
                > > Anyway, I hope this helps. If not, keep asking and we'll get it
                > > figured out!
                > >
                > > Luke
                > >
                > > --- In ydn-javascript@yahoogroups.com, "rivettmj" <rivettmj@> wrote:
                > > >
                > > > I've been continuing to play with the pagination functions and have
                > > > almost got it working, the only thing that does not work at the
                > > > moment, is the number of pages in the data set does not update
                > > > correctly (the initial data load has three pages, and if you
                filter it
                > > > down, it still shows three pages in the smaller table, two of which
                > > > are empty) I just know I'm missing something simple at this point
                > > > (being able to tell the pagination object 'please refresh!')
                > > >
                > > > Here is the updated code I'm working with:
                > > >
                > > > <html>
                > > > <head>
                > > > <title>Test Page</title>
                > > > <link type="text/css" rel="stylesheet"
                > > > href="../assets/dpSyntaxHighlighter.css">
                > > > <link rel="stylesheet" type="text/css"
                > > >
                > >
                >
                href="http://yui.yahooapis.com/2.5.1/build/datatable/assets/skins/sam/datatable.css">
                > > > <style type="text/css">
                > > > body {
                > > > font: normal .9em/1.3 Arial, sans-serif;
                > > > }
                > > > .origin {
                > > > display: block;
                > > > background: #795089;
                > > > padding: 1ex;
                > > > color: #fff;
                > > > text-align: right;
                > > > margin-bottom: 1em;
                > > > }
                > > > label {
                > > > display: block;
                > > > margin-bottom: 1em;
                > > > }
                > > > </style>
                > > > </head>
                > > > <body class="yui-skin-sam">
                > > > <a class="origin"
                > > >
                > >
                >
                href="http://tech.groups.yahoo.com/group/ydn-javascript/message/29679">ydn-js
                > > > origin</a>
                > > >
                > > > <div class="markup">
                > > > <label for="filter">Show
                > > > <select id="filter">
                > > > <option value="0">all records</option>
                > > > <option value="10">Items with Quantity > 10</option>
                > > > <option value="50">Items with Quantity > 50</option>
                > > >
                > > > <option value="75">Items with Quantity > 75</option>
                > > > <option value="100">Items with Quantity >
                100</option>
                > > > <option value="200">Items with Quantity >
                200</option>
                > > > </select>
                > > >
                > > > </label>
                > > > <div id="tbl"></div>
                > > > </div>
                > > >
                > > > <script type="text/javascript"
                > > >
                > >
                >
                src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
                > > > <script type="text/javascript"
                > > >
                > >
                >
                src="http://yui.yahooapis.com/2.5.1/build/element/element-beta.js"></script>
                > > > <script type="text/javascript"
                > > > src="../../build/paginator/paginator-min.js"></script>
                > > > <link rel="stylesheet" type="text/css"
                > > > href="../../build/paginator/assets/skins/sam/paginator.css" />
                > > >
                > > >
                > > > <script type="text/javascript"
                > > >
                > >
                >
                src="http://yui.yahooapis.com/2.5.1/build/datasource/datasource-beta.js"></script>
                > > > <script type="text/javascript"
                > > >
                > >
                >
                src="http://yui.yahooapis.com/2.5.1/build/datatable/datatable-beta.js"></script>
                > > > <script type="text/javascript"
                > > >
                > >
                >
                src="http://developer.yahoo.com/yui/examples/datatable/assets/js/data.js"></script>
                > > > <script type="text/javascript">
                > > > YAHOO.util.Event.onDOMReady(function () {
                > > >
                > > > var Ex = YAHOO.namespace('example'),
                > > > data = YAHOO.example.Data.inventory,
                > > > totrec = 0;
                > > >
                > > > var myFilter = function (min) {
                > > > var results = [];
                > > > totrec = 0;
                > > > for (var i=0,l=data.length; i<l; ++i) {
                > > > if (data[i].Quantity > min) {
                > > > results.push(data[i]);
                > > > totrec = totrec + 1;
                > > > }
                > > > }
                > > >
                > > > // Generate an oResponse object
                > > > alert(totrec+" "+min);
                > > > //myDataTable.totalRecords = totrec;
                > > > return results;
                > > > };
                > > >
                > > > Ex.dataSource = new YAHOO.util.DataSource(myFilter);
                > > > Ex.dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
                > > > Ex.dataSource.responseSchema = {
                > > > fields : ['SKU','Quantity','Item','Description']
                > > > };
                > > >
                > > > var myConfigs = {
                > > > initialRequest: 0, // Initial request for first page
                > > > of data
                > > > dynamicData: true, // Enables dynamic
                > server-driven data
                > > > sortedBy : {key:"SKU",
                > > > dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
                > > > paginator: new YAHOO.widget.Paginator({
                rowsPerPage:5
                > > > }) // Enables pagination
                > > > };
                > > >
                > > > Ex.dataTable = new YAHOO.widget.DataTable('tbl', [
                > > > {key:'SKU'},{key:'Quantity'},{key:'Item'},{key:'Description'}
                > > > ],Ex.dataSource,myConfigs);
                > > >
                > > > Ex.callback = {
                > > > success : Ex.dataTable.onDataReturnInitializeTable,
                > > > failure : Ex.dataTable.onDataReturnInitializeTable,
                > > > scope : Ex.dataTable
                > > > };
                > > >
                > > > YAHOO.util.Event.on('filter','change',function (e) {
                > > > var min = parseInt(this.options[this.selectedIndex].value,10);
                > > > Ex.dataSource.sendRequest(min, Ex.callback);
                > > > });
                > > >
                > > > });
                > > >
                > > > </script>
                > > > <script type="text/javascript"
                src="../assets/dpSyntaxHighlighter.js"
                > > > ></script>
                > > > <script type="text/javascript"
                > > > src="../assets/dpSyntaxHighlightExample.js"></script>
                > > > </body>
                > > > </html>
                > > >
                > > >
                > > > --- In ydn-javascript@yahoogroups.com, "rivettmj" <rivettmj@> wrote:
                > > > >
                > > > > Hello again, I've had a lot of success building a datatable
                > that you
                > > > > can filter by searching user entered form data, however I've been
                > > > > unsuccessful getting Paginator to play with it (it works for the
                > > > > initial page, but breaks when the number of items in the table
                > > > > changes. I assume that this is because it has no way of
                > 'knowing' how
                > > > > many items are getting displayed. I've found a couple of smalled
                > > > > examples of dynamic tables, and am now trying to get Paginator
                > to work
                > > > > with then before trying to integrate this feature into the more
                > > > > complex page I already have. here is the example I'm trying
                to get
                > > > > working:
                > > > >
                > > > >
                > > >
                > >
                >
                http://www.explodingcow.com/~rivettmj/yui/examples/datatable/yuiblog.html
                > > > >
                > > > > I've tried *many* different combination of the
                > > > > http://developer.yahoo.com/yui/docs/YAHOO.widget.Paginator.html
                > > > > methods, none seem to work. (I figure what I want to provide is
                > really
                > > > > 'serverside' data display, but using a local JSARRAY for data)
                > > > >
                > > > > I have the page currently building a variable called totrec, that
                > > > > always returns the number of items in the table, I'm just not
                > sure how
                > > > > to tell the paginator about them :)
                > > > >
                > > > > Any help from the masters of YUI would be greatly appreciated!
                > > > >
                > > > > -- Mike
                > > > >
                > > >
                > >
                >
              • rivettmj
                It works very well thanks! Not to mention the YAHOO.util.Event.on( filter , keyup ,function (e) does exactly what I wanted to do (and was reinventing the
                Message 7 of 9 , Jan 6, 2009
                • 0 Attachment
                  It works very well thanks! Not to mention the
                  YAHOO.util.Event.on('filter','keyup',function (e) does exactly what I
                  wanted to do (and was reinventing the wheel in order to do!)

                  Thanks! Thanks! Thanks! :)

                  -- Mike



                  <Snipping history to keep messages shorter>
                Your message has been successfully submitted and would be delivered to recipients shortly.