Apply Filters using JSON

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • buntyindia
    New Member
    • Jun 2007
    • 101
    #1

    Apply Filters using JSON

    [PHP]{"length":50,"a ccounting":[
    {"firstName":"J ohn","lastName" :"Doe","age":23 },
    {"firstName":"M ary","lastName" :"Smith","age": 32},
    {"firstName":"S ally","lastName ":"Green","age" :23},
    {"firstName":"J im","lastName": "Galley","age": 41}
    ]}
    [/PHP]
    I am rendering the above JSON object in a tabel using DOM .

    Now i want to add a functionality of Filters means
    There is some check box specifying age

    if I select 23 age check box it display all the data where age is 23
    the table only render those records.

    If i unselect the check box it render all the records without filter.


    Please help how to do this

    Regards,
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      hi ...

      onclick of your checkbox you should identify its checked-property and call a function that loops through your (json-data) and grabs the appropriate records from it. with that you create new table-row-elements with table-cells and their texts. remove all current table-rows and append the new rows ... you may have a look at the following dom-methods for that issue:

      createElement() ;
      removeChild();
      appendChild();
      createTextNode( );

      kind regards

        Comment

        • buntyindia
          New Member
          • Jun 2007
          • 101
          #3
          Originally posted by gits
          hi ...

          onclick of your checkbox you should identify its checked-property and call a function that loops through your (json-data) and grabs the appropriate records from it. with that you create new table-row-elements with table-cells and their texts. remove all current table-rows and append the new rows ... you may have a look at the following dom-methods for that issue:

          createElement() ;
          removeChild();
          appendChild();
          createTextNode( );

          kind regards
          Any example is available on the net for this?

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5390
              #4
              hi ...

              ok ... let me give you an example for the dom-handling:

              [CODE=javascript]<html>
              <script type="text/javascript">
              function handle_rows() {
              var table = document.getEle mentById('t1');
              var rows = table.getElemen tsByTagName('tr ');

              // remove all rows
              while (rows.length > 0) {
              table.removeChi ld(table.lastCh ild);
              rows = table.getElemen tsByTagName('tr ');
              }

              // create a new one
              var nr = document.create Element('tr');
              var nc = document.create Element('td');
              var t = document.create TextNode('new text');

              // appending now:
              nc.appendChild( t);
              nr.appendChild( nc);
              table.appendChi ld(nr);
              }
              </script>
              <body>
              <table id="t1">
              <tr>
              <td>test1</td>
              </tr>
              <tr>
              <td>test2</td>
              </tr>
              </table>
              <input type="button" onclick="handle _rows();" value="handle rows"/>
              </body>
              </html>
              [/CODE]
              kind regards

                Comment

                • buntyindia
                  New Member
                  • Jun 2007
                  • 101
                  #5
                  Originally posted by gits
                  hi ...

                  ok ... let me give you an example for the dom-handling:

                  [CODE=javascript]<html>
                  <script type="text/javascript">
                  function handle_rows() {
                  var table = document.getEle mentById('t1');
                  var rows = table.getElemen tsByTagName('tr ');

                  // remove all rows
                  while (rows.length > 0) {
                  table.removeChi ld(table.lastCh ild);
                  rows = table.getElemen tsByTagName('tr ');
                  }

                  // create a new one
                  var nr = document.create Element('tr');
                  var nc = document.create Element('td');
                  var t = document.create TextNode('new text');

                  // appending now:
                  nc.appendChild( t);
                  nr.appendChild( nc);
                  table.appendChi ld(nr);
                  }
                  </script>
                  <body>
                  <table id="t1">
                  <tr>
                  <td>test1</td>
                  </tr>
                  <tr>
                  <td>test2</td>
                  </tr>
                  </table>
                  <input type="button" onclick="handle _rows();" value="handle rows"/>
                  </body>
                  </html>
                  [/CODE]
                  kind regards

                  Thanks gits for the example :)

                  but gits how to handle JSON data to get a Filtered Data on clicking of checkBox and to restore the original data after unchecking the check box ?

                  [PHP] {"length":50,"a ccounting":[
                  {"firstName":"J ohn","lastName" :"Doe","age":23 },
                  {"firstName":"M ary","lastName" :"Smith","age": 32},
                  {"firstName":"S ally","lastName ":"Green","age" :23},
                  {"firstName":"J im","lastName": "Galley","age": 41}
                  ]}[/PHP]


                  Please provide some help/example on this.... I am very urgent need of this ...

                  Regards,

                    Comment

                    • buntyindia
                      New Member
                      • Jun 2007
                      • 101
                      #6
                      I got some idea how to do this filter stuff, will defeneitly share with all once it complete :)

                        Comment

                        • gits
                          Recognized Expert Moderator Expert
                          • May 2007
                          • 5390
                          #7
                          ok ... i'm looking forward to it :)

                            Comment

                            Previous template Next
                            Working...