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

Re: [ydn-javascript] DataTable - Reverse records instead of sort them

Expand Messages
  • 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 1 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 2 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 3 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 4 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.