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

DataTable - Reverse records instead of sort them

Expand Messages
  • bj4fr
    Hi, I m using DataTable with Progressive Enhancement of Markup which is a great stuff, but I ve got a problem with a column. In my DataTable I m using French
    Message 1 of 5 , Oct 1, 2007
    • 0 Attachment
      Hi,

      I'm using DataTable with Progressive Enhancement of Markup which is a
      great stuff, but I've got a problem with a column. In my DataTable I'm
      using French date format in plain text which are already sorted by
      desc. But when I try to sort them that's not working.. :( Is there a
      mean to reverse the records when I click over the header of this
      column instead of use sort function?


      Thanks
    • Satyam
      Dates in dd/mm/yyyy format are not directly sortable since the most significant part is last. If you do nothing, the DataTable will sort them as strings,
      Message 2 of 5 , Oct 1, 2007
      • 0 Attachment
        Dates in dd/mm/yyyy format are not directly sortable since the most
        significant part is last. If you do nothing, the DataTable will sort them
        as strings, which is all it can do unless you tell it otherwise. This you
        can do by using a parser function when reading the data from markup so that
        the dates are stored internally as actual JavaScript Date objects.

        In the DataSource, you can just name the fields to read or specify an object
        with several properties for each field, for example:

        myDataSource.responseSchema.fields = [
        'someField', 'someOtherField',
        {key:'someDateField',parser:function(dateString) {
        var parts = dateString.split('/');
        return new Date(parts[2],parts[1] -1,parts[0]);
        }},
        ... ];


        With the dates stored internally as proper Date objects, the sort function
        will work.

        Now, the problem comes again when displaying it. You need to take the
        internal Date object and format it the way you want it. This you do in the
        column definitions using a formatter function. The DataTable already has a
        formatDate function, but it will format them in m/d/y order, which is not
        what you want. You can replace that function by including this function
        after you have included datatable-beta.js into your page:

        YAHOO.widget.DataTable.formatDate = function(el, oRecord, oColumn, oData) {
        var oDate = oData;
        el.style.textAlign='right';
        if(oDate instanceof Date) {
        el.innerHTML = oDate.getDate() + "/" + (oDate.getMonth()+1) + "/" +
        oDate.getFullYear();
        }
        else {
        el.innerHTML = YAHOO.lang.isValue(oData) ? oData : "";
        }
        };

        Then, in the column definitions, by just indicating formatter:'date',
        DataTable will use this function instead of the built in. Basically, this
        function is just the very same that comes with DataTable with the day and
        month swapped.

        All this you can read in:
        http://yuiblog.com/blog/2007/09/12/satyam-datatable/

        bj2u2

        Satyam






        ----- Original Message -----
        From: "bj4fr" <bj4fr@...>
        To: <ydn-javascript@yahoogroups.com>
        Sent: Monday, October 01, 2007 3:14 PM
        Subject: [ydn-javascript] DataTable - Reverse records instead of sort them


        > Hi,
        >
        > I'm using DataTable with Progressive Enhancement of Markup which is a
        > great stuff, but I've got a problem with a column. In my DataTable I'm
        > using French date format in plain text which are already sorted by
        > desc. But when I try to sort them that's not working.. :( Is there a
        > mean to reverse the records when I click over the header of this
        > column instead of use sort function?
        >
        >
        > Thanks
        >
        >
        >
        >
        > Yahoo! Groups Links
        >
        >
        >
        >
        >
        > --
        > No virus found in this incoming message.
        > Checked by AVG Free Edition.
        > Version: 7.5.488 / Virus Database: 269.13.35/1040 - Release Date:
        > 30/09/2007 21:01
        >
        >
      • bj4fr
        Yes, I knew that but in my case, the HTML table code looks like that: Date Date in
        Message 3 of 5 , Oct 2, 2007
        • 0 Attachment
          Yes, I knew that but in my case, the HTML table code looks like that:
          <table id="myTable">
          <thead>
          <tr>
          <th>Date</th>
          </tr>
          </thead>
          <tbody>
          <tr>
          <td>Date in plain text (Friday 14 September 2007)</td>
          </tr>
          </tbody>
          </table>

          This table is generated using PHP and the date is formatted with a
          function contingent on the user language.

          The table is already sort by date when I generate it in PHP.

          So I would like to apply it a function that reverses the record order
          when you click on the date column.

          Ex:
          <td>Friday 14 September 2007</td>
          <td>Monday 09 July 2007</td>
          <td>Tuesday 20 May 2007</td>

          When you reverse the order:

          <td>Tuesday 20 May 2007</td>
          <td>Monday 09 July 2007</td>
          <td>Friday 14 September 2007</td>


          But I think that will be hard...

          --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
          >
          > Dates in dd/mm/yyyy format are not directly sortable since the most
          > significant part is last. If you do nothing, the DataTable will
          sort them
          > as strings, which is all it can do unless you tell it otherwise.
          This you
          > can do by using a parser function when reading the data from markup
          so that
          > the dates are stored internally as actual JavaScript Date objects.
          >
          > In the DataSource, you can just name the fields to read or specify
          an object
          > with several properties for each field, for example:
          >
          > myDataSource.responseSchema.fields = [
          > 'someField', 'someOtherField',
          > {key:'someDateField',parser:function(dateString) {
          > var parts = dateString.split('/');
          > return new Date(parts[2],parts[1] -1,parts[0]);
          > }},
          > ... ];
          >
          >
          > With the dates stored internally as proper Date objects, the sort
          function
          > will work.
          >
          > Now, the problem comes again when displaying it. You need to take the
          > internal Date object and format it the way you want it. This you do
          in the
          > column definitions using a formatter function. The DataTable
          already has a
          > formatDate function, but it will format them in m/d/y order, which
          is not
          > what you want. You can replace that function by including this
          function
          > after you have included datatable-beta.js into your page:
          >
          > YAHOO.widget.DataTable.formatDate = function(el, oRecord, oColumn,
          oData) {
          > var oDate = oData;
          > el.style.textAlign='right';
          > if(oDate instanceof Date) {
          > el.innerHTML = oDate.getDate() + "/" + (oDate.getMonth()+1)
          + "/" +
          > oDate.getFullYear();
          > }
          > else {
          > el.innerHTML = YAHOO.lang.isValue(oData) ? oData : "";
          > }
          > };
          >
          > Then, in the column definitions, by just indicating formatter:'date',
          > DataTable will use this function instead of the built in.
          Basically, this
          > function is just the very same that comes with DataTable with the
          day and
          > month swapped.
          >
          > All this you can read in:
          > http://yuiblog.com/blog/2007/09/12/satyam-datatable/
          >
          > bj2u2
          >
          > Satyam
          >
          >
          >
          >
          >
          >
          > ----- Original Message -----
          > From: "bj4fr" <bj4fr@...>
          > To: <ydn-javascript@yahoogroups.com>
          > Sent: Monday, October 01, 2007 3:14 PM
          > Subject: [ydn-javascript] DataTable - Reverse records instead of
          sort them
          >
          >
          > > Hi,
          > >
          > > I'm using DataTable with Progressive Enhancement of Markup which is a
          > > great stuff, but I've got a problem with a column. In my DataTable I'm
          > > using French date format in plain text which are already sorted by
          > > desc. But when I try to sort them that's not working.. :( Is there a
          > > mean to reverse the records when I click over the header of this
          > > column instead of use sort function?
          > >
          > >
          > > Thanks
          > >
          > >
          > >
          > >
          > > Yahoo! Groups Links
          > >
          > >
          > >
          > >
          > >
          > > --
          > > No virus found in this incoming message.
          > > Checked by AVG Free Edition.
          > > Version: 7.5.488 / Virus Database: 269.13.35/1040 - Release Date:
          > > 30/09/2007 21:01
          > >
          > >
          >
        • Satyam
          Markup is fine, but when the data is so heavily formatted and localized, I m afraid it is not very useful. Can t you get to the server and get the raw data?
          Message 4 of 5 , Oct 2, 2007
          • 0 Attachment
            Markup is fine, but when the data is so heavily formatted and localized, I'm
            afraid it is not very useful. Can't you get to the server and get the raw
            data?

            Anyway, if that can't be done, then you might (not sure, you would have to
            try) write a parser and formatter function so that the parser prefixes the
            date with, lets say, a 3 or 4 digit record number with all leading zeros,
            then the formatter strips those 3 or 4 characters. Then, the data, as it is
            stored in the recordset, is sortable and you still keep the same format and
            language.

            Another alternative is to write your own sort function for that column. The
            sort function has access to the whole record, not just the values in the
            column you are sorting. Instead of using

            a.getData('dateField')

            to get the date and compare it with the other, you might do:

            a.getId()

            which gives you the original serial number. If the records were originally
            sorted, this numbers will follow that order. If there are record inserts
            then the new record will get a number larger than the largest and would not
            be related to the date. If the date is edited with the inline editor
            (something you would not be able to do anyway if you cannot parse it) then
            it would also fail.

            Satyam

            ----- Original Message -----
            From: "bj4fr" <bj4fr@...>
            To: <ydn-javascript@yahoogroups.com>
            Sent: Tuesday, October 02, 2007 10:32 AM
            Subject: [ydn-javascript] Re: DataTable - Reverse records instead of sort
            them


            > Yes, I knew that but in my case, the HTML table code looks like that:
            > <table id="myTable">
            > <thead>
            > <tr>
            > <th>Date</th>
            > </tr>
            > </thead>
            > <tbody>
            > <tr>
            > <td>Date in plain text (Friday 14 September 2007)</td>
            > </tr>
            > </tbody>
            > </table>
            >
            > This table is generated using PHP and the date is formatted with a
            > function contingent on the user language.
            >
            > The table is already sort by date when I generate it in PHP.
            >
            > So I would like to apply it a function that reverses the record order
            > when you click on the date column.
            >
            > Ex:
            > <td>Friday 14 September 2007</td>
            > <td>Monday 09 July 2007</td>
            > <td>Tuesday 20 May 2007</td>
            >
            > When you reverse the order:
            >
            > <td>Tuesday 20 May 2007</td>
            > <td>Monday 09 July 2007</td>
            > <td>Friday 14 September 2007</td>
            >
            >
            > But I think that will be hard...
            >
            > --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
            >>
            >> Dates in dd/mm/yyyy format are not directly sortable since the most
            >> significant part is last. If you do nothing, the DataTable will
            > sort them
            >> as strings, which is all it can do unless you tell it otherwise.
            > This you
            >> can do by using a parser function when reading the data from markup
            > so that
            >> the dates are stored internally as actual JavaScript Date objects.
            >>
            >> In the DataSource, you can just name the fields to read or specify
            > an object
            >> with several properties for each field, for example:
            >>
            >> myDataSource.responseSchema.fields = [
            >> 'someField', 'someOtherField',
            >> {key:'someDateField',parser:function(dateString) {
            >> var parts = dateString.split('/');
            >> return new Date(parts[2],parts[1] -1,parts[0]);
            >> }},
            >> ... ];
            >>
            >>
            >> With the dates stored internally as proper Date objects, the sort
            > function
            >> will work.
            >>
            >> Now, the problem comes again when displaying it. You need to take the
            >> internal Date object and format it the way you want it. This you do
            > in the
            >> column definitions using a formatter function. The DataTable
            > already has a
            >> formatDate function, but it will format them in m/d/y order, which
            > is not
            >> what you want. You can replace that function by including this
            > function
            >> after you have included datatable-beta.js into your page:
            >>
            >> YAHOO.widget.DataTable.formatDate = function(el, oRecord, oColumn,
            > oData) {
            >> var oDate = oData;
            >> el.style.textAlign='right';
            >> if(oDate instanceof Date) {
            >> el.innerHTML = oDate.getDate() + "/" + (oDate.getMonth()+1)
            > + "/" +
            >> oDate.getFullYear();
            >> }
            >> else {
            >> el.innerHTML = YAHOO.lang.isValue(oData) ? oData : "";
            >> }
            >> };
            >>
            >> Then, in the column definitions, by just indicating formatter:'date',
            >> DataTable will use this function instead of the built in.
            > Basically, this
            >> function is just the very same that comes with DataTable with the
            > day and
            >> month swapped.
            >>
            >> All this you can read in:
            >> http://yuiblog.com/blog/2007/09/12/satyam-datatable/
            >>
            >> bj2u2
            >>
            >> Satyam
            >>
            >>
            >>
            >>
            >>
            >>
            >> ----- Original Message -----
            >> From: "bj4fr" <bj4fr@...>
            >> To: <ydn-javascript@yahoogroups.com>
            >> Sent: Monday, October 01, 2007 3:14 PM
            >> Subject: [ydn-javascript] DataTable - Reverse records instead of
            > sort them
            >>
            >>
            >> > Hi,
            >> >
            >> > I'm using DataTable with Progressive Enhancement of Markup which is a
            >> > great stuff, but I've got a problem with a column. In my DataTable I'm
            >> > using French date format in plain text which are already sorted by
            >> > desc. But when I try to sort them that's not working.. :( Is there a
            >> > mean to reverse the records when I click over the header of this
            >> > column instead of use sort function?
            >> >
            >> >
            >> > Thanks
            >> >
            >> >
            >> >
            >> >
            >> > Yahoo! Groups Links
            >> >
            >> >
            >> >
            >> >
            >> >
            >> > --
            >> > No virus found in this incoming message.
            >> > Checked by AVG Free Edition.
            >> > Version: 7.5.488 / Virus Database: 269.13.35/1040 - Release Date:
            >> > 30/09/2007 21:01
            >> >
            >> >
            >>
            >
            >
            >
            >
            >
            > Yahoo! Groups Links
            >
            >
            >
            >
            >
            > --
            > No virus found in this incoming message.
            > Checked by AVG Free Edition.
            > Version: 7.5.488 / Virus Database: 269.13.39/1044 - Release Date:
            > 02/10/2007 11:10
            >
            >
          • bj4fr
            Thanks for your help, that was very useful. I thought, like you, to write my own sort function but we have finally changed the way to display the data using
            Message 5 of 5 , Oct 4, 2007
            • 0 Attachment
              Thanks for your help, that was very useful.

              I thought, like you, to write my own sort function but we have finally
              changed the way to display the data using server-side pagination and
              sorting with some other column...
              That means in some case when I won't receive the date already sorted, so
              it would fail.
              So finally I send the date in english format and use my own formatter
              function to display it in the good language. Even if I have this same
              function in PHP.


              Thanks again.


              --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
              >
              > Markup is fine, but when the data is so heavily formatted and
              localized, I'm
              > afraid it is not very useful. Can't you get to the server and get the
              raw
              > data?
              >
              > Anyway, if that can't be done, then you might (not sure, you would
              have to
              > try) write a parser and formatter function so that the parser prefixes
              the
              > date with, lets say, a 3 or 4 digit record number with all leading
              zeros,
              > then the formatter strips those 3 or 4 characters. Then, the data, as
              it is
              > stored in the recordset, is sortable and you still keep the same
              format and
              > language.
              >
              > Another alternative is to write your own sort function for that
              column. The
              > sort function has access to the whole record, not just the values in
              the
              > column you are sorting. Instead of using
              >
              > a.getData('dateField')
              >
              > to get the date and compare it with the other, you might do:
              >
              > a.getId()
              >
              > which gives you the original serial number. If the records were
              originally
              > sorted, this numbers will follow that order. If there are record
              inserts
              > then the new record will get a number larger than the largest and
              would not
              > be related to the date. If the date is edited with the inline editor
              > (something you would not be able to do anyway if you cannot parse it)
              then
              > it would also fail.
              >
              > Satyam
              >
              > ----- Original Message -----
              > From: "bj4fr" bj4fr@...
              > To: ydn-javascript@yahoogroups.com
              > Sent: Tuesday, October 02, 2007 10:32 AM
              > Subject: [ydn-javascript] Re: DataTable - Reverse records instead of
              sort
              > them
              >
              >
              > > Yes, I knew that but in my case, the HTML table code looks like
              that:
              > > <table id="myTable">
              > > <thead>
              > > <tr>
              > > <th>Date</th>
              > > </tr>
              > > </thead>
              > > <tbody>
              > > <tr>
              > > <td>Date in plain text (Friday 14 September 2007)</td>
              > > </tr>
              > > </tbody>
              > > </table>
              > >
              > > This table is generated using PHP and the date is formatted with a
              > > function contingent on the user language.
              > >
              > > The table is already sort by date when I generate it in PHP.
              > >
              > > So I would like to apply it a function that reverses the record
              order
              > > when you click on the date column.
              > >
              > > Ex:
              > > <td>Friday 14 September 2007</td>
              > > <td>Monday 09 July 2007</td>
              > > <td>Tuesday 20 May 2007</td>
              > >
              > > When you reverse the order:
              > >
              > > <td>Tuesday 20 May 2007</td>
              > > <td>Monday 09 July 2007</td>
              > > <td>Friday 14 September 2007</td>
              > >
              > >
              > > But I think that will be hard...
              > >
              > > --- In ydn-javascript@yahoogroups.com, "Satyam" satyam@ wrote:
              > >>
              > >> Dates in dd/mm/yyyy format are not directly sortable since the most
              > >> significant part is last. If you do nothing, the DataTable will
              > > sort them
              > >> as strings, which is all it can do unless you tell it otherwise.
              > > This you
              > >> can do by using a parser function when reading the data from markup
              > > so that
              > >> the dates are stored internally as actual JavaScript Date objects.
              > >>
              > >> In the DataSource, you can just name the fields to read or specify
              > > an object
              > >> with several properties for each field, for example:
              > >>
              > >> myDataSource.responseSchema.fields = [
              > >> 'someField', 'someOtherField',
              > >> {key:'someDateField',parser:function(dateString) {
              > >> var parts = dateString.split('/');
              > >> return new Date(parts[2],parts[1] -1,parts[0]);
              > >> }},
              > >> ... ];
              > >>
              > >>
              > >> With the dates stored internally as proper Date objects, the sort
              > > function
              > >> will work.
              > >>
              > >> Now, the problem comes again when displaying it. You need to take
              the
              > >> internal Date object and format it the way you want it. This you
              do
              > > in the
              > >> column definitions using a formatter function. The DataTable
              > > already has a
              > >> formatDate function, but it will format them in m/d/y order, which
              > > is not
              > >> what you want. You can replace that function by including this
              > > function
              > >> after you have included datatable-beta.js into your page:
              > >>
              > >> YAHOO.widget.DataTable.formatDate = function(el, oRecord, oColumn,
              > > oData) {
              > >> var oDate = oData;
              > >> el.style.textAlign='right';
              > >> if(oDate instanceof Date) {
              > >> el.innerHTML = oDate.getDate() + "/" + (oDate.getMonth()+1)
              > > + "/" +
              > >> oDate.getFullYear();
              > >> }
              > >> else {
              > >> el.innerHTML = YAHOO.lang.isValue(oData) ? oData : "";
              > >> }
              > >> };
              > >>
              > >> Then, in the column definitions, by just indicating
              formatter:'date',
              > >> DataTable will use this function instead of the built in.
              > > Basically, this
              > >> function is just the very same that comes with DataTable with the
              > > day and
              > >> month swapped.
              > >>
              > >> All this you can read in:
              > >> http://yuiblog.com/blog/2007/09/12/satyam-datatable/
              > >>
              > >> bj2u2
              > >>
              > >> Satyam
              > >>
              > >>
              > >>
              > >>
              > >>
              > >>
              > >> ----- Original Message -----
              > >> From: "bj4fr" bj4fr@
              > >> To: ydn-javascript@yahoogroups.com
              > >> Sent: Monday, October 01, 2007 3:14 PM
              > >> Subject: [ydn-javascript] DataTable - Reverse records instead of
              > > sort them
              > >>
              > >>
              > >> > Hi,
              > >> >
              > >> > I'm using DataTable with Progressive Enhancement of Markup which
              is a
              > >> > great stuff, but I've got a problem with a column. In my
              DataTable I'm
              > >> > using French date format in plain text which are already sorted
              by
              > >> > desc. But when I try to sort them that's not working.. :( Is
              there a
              > >> > mean to reverse the records when I click over the header of this
              > >> > column instead of use sort function?
              > >> >
              > >> >
              > >> > Thanks
              > >> >
              > >> >
              > >> >
              > >> >
              > >> > Yahoo! Groups Links
              > >> >
              > >> >
              > >> >
              > >> >
              > >> >
              > >> > --
              > >> > No virus found in this incoming message.
              > >> > Checked by AVG Free Edition.
              > >> > Version: 7.5.488 / Virus Database: 269.13.35/1040 - Release Date:
              > >> > 30/09/2007 21:01
              > >> >
              > >> >
              > >>
              > >
              > >
              > >
              > >
              > >
              > > Yahoo! Groups Links
              > >
              > >
              > >
              > >
              > >
              > > --
              > > No virus found in this incoming message.
              > > Checked by AVG Free Edition.
              > > Version: 7.5.488 / Virus Database: 269.13.39/1044 - Release Date:
              > > 02/10/2007 11:10
              > >
              > >
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.