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

Re: DataTable - Reverse records instead of sort them

Expand Messages
  • bj4fr
    Yes, I knew that but in my case, the HTML table code looks like that: Date Date in
    Message 1 of 5 , Oct 2, 2007
      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 2 of 5 , Oct 2, 2007
        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 3 of 5 , Oct 4, 2007
          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.