SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 49 of 49
  1. #26
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi, this is the data returned by ajax,it is printed in log

    Code:
    <table width='200' border='1' class='myTable'>  <tr class='sticky'><th>ID</th><th>studname</th><th>age</th></tr><tr>
              <td>91</td>
              <td>james</td>
              <td>24</td>
            </tr><tr>
              <td>92</td>
              <td>carl</td>
              <td>44</td>
            </tr><tr>
              <td>93</td>
              <td>fred</td>
              <td>33</td>
            </tr><tr>
              <td>94</td>
              <td>mark</td>
              <td>33</td>
            </tr><tr>
              <td>95</td>
              <td>shane</td>
              <td>49</td>
            </tr><tr>
              <td>96</td>
              <td>harry</td>
              <td>30</td>
            </tr><tr>
              <td>102</td>
              <td>jack</td>
              <td>55</td>
            </tr></table>

  2. #27
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Ok, well that's good.
    Can you insert it into the page ok?

  3. #28
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    That's nice, but doesn't answer my question
    Hi pullo, sorry for that post it did not answer your question, i am just asking you that i put that code in the head tag, i posted the result data in my next post which will answer your question.

  4. #29
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Can you insert it into the page ok?
    you mean you want to see the html result ?

  5. #30
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    As long as it is within document.ready it doesn't matter where on the page it is.
    Can you get the result of your ajax call to display?

  6. #31
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Can you get the result of your ajax call to display?
    I posted already in post#26

    this is the result in html tab of firebug after the ajax loaded.

    Code:
    <table class="myTable" width="200" border="1">
    <tbody>
            <tr class="sticky">
    			<th>ID</th>
    			<th>studname</th>
    			<th>age</th>
    		</tr>
    		<tr>
    		<td>91</td>
              <td>james</td>
              <td>24</td>
            </tr>
    		<tr>
              <td>92</td>
              <td>carl</td>
              <td>44</td>
            </tr>
    		<tr>
              <td>93</td>
              <td>fred</td>
              <td>33</td>
            </tr>
    		<tr>
              <td>94</td>
              <td>mark</td>
              <td>33</td>
            </tr>
    		<tr>
              <td>95</td>
              <td>shane</td>
              <td>49</td>
            </tr>
    		<tr>
              <td>96</td>
              <td>harry</td>
              <td>30</td>
            </tr>
    		<tr>
              <td>102</td>
              <td>jack</td>
              <td>55</td>
            </tr></table>

  7. #32
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    We're getting our wires slightly crossed.
    I've got to go out now. I'll pick this up tomorrow.

  8. #33
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay...see you tomorrow thanks

  9. #34
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    I made you a new demo using AJAX to pull in the table, then initialize the pagination.
    It all worked pretty much as expected, although I had to wrap the initialization of the pagination in a function, which was then called after the AJAX query had completed successfully.

    To be complete, here's the code:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <!--http://www.sitepoint.com/forums/showthread.php?989241-I-am-stuck-on-this-jquery-->
        <title>jqPagination example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script src="https://raw.github.com/beneverard/jqPagination/master/js/jquery.jqpagination.js"></script>
        <link rel="stylesheet" type="text/css" href="https://raw.github.com/beneverard/jqPagination/master/css/jqpagination.css" />
      </head>
    
      <body>
        <div class="pagination">
          <a href="#" class="first" data-action="first">&laquo;</a>
          <a href="#" class="previous" data-action="previous">&lsaquo;</a>               
          <input type="text" readonly="readonly" />
          <a href="#" class="next" data-action="next">&rsaquo;</a>
          <a href="#" class="last" data-action="last">&raquo;</a>
        </div>
        
        <script>
          $(document).ready(function() {
            function sortPagination(){
              $('.myTable tr').hide().filter(':lt(2)').show();
              $('.pagination').jqPagination({
                max_page : $('.myTable tr').length -1,
                paged : function(page) {
                  $('.myTable tr:not(:first)').hide();
                  $($('.myTable tr')[page]).show();
                }
              });
            }
            
            $.ajax({
              type: "POST",
              dataType: 'html',
              url: "ajax.php",
              success: function(data){
                $("body").prepend(data);
                sortPagination();
              }
            });        
          });
        </script>
      </body>
    </html>
    ajax.php

    Code:
    <?php
    echo("
    <table width=\"200\" border=\"1\" class=\"myTable\">
          <tr class=\"sticky\">
            <th>ID</th>
            <th>Studname</th>
            <th>Age</th>
          </tr>
          <tr>
            <td>91</td>
            <td>shane</td>
            <td>20</td>
          </tr>
          <tr>
            <td>92</td>
            <td>charlie</td>
            <td>20</td>
          </tr>
          <tr>
            <td>93</td>
            <td>melli</td>
            <td>25</td>
          </tr>
          <tr>
            <td>94</td>
            <td>mike</td>
            <td>26</td>
          </tr>
          <tr>
            <td>95</td>
            <td>harry</td>
            <td>29</td>
          </tr>
          <tr>
            <td>96</td>
            <td>tom</td>
            <td>20</td>
          </tr>
          <tr>
            <td>97</td>
            <td>jack</td>
            <td>20</td>
          </tr>
          <tr>
            <td>98</td>
            <td>feld</td>
            <td>27</td>
          </tr>
          <tr>
            <td>99</td>
            <td>marie</td>
            <td>26</td>
          </tr>
          <tr>
            <td>100</td>
            <td>tora</td>
            <td>24</td>
          </tr>
          <tr>
            <td>101</td>
            <td>jammy</td>
            <td>30</td>
          </tr>
        </table>
    ");		
    ?>
    HTH

  10. #35
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, before i am going to test the new demo, i have something to say because i am confuse on the scenario,

    In your first demo inside the body there is a table and i tried to test if i can alert when i am going to click the row of the table

    $(document).ready(function() {
    $('.myTable tr').click(function(){
    alert("you click the row");
    });

    });
    and it is working that i expected to alert..but when i tried my version that the table is requested via ajax and loaded to the div when i click the row it will not alert

    Code:
       <script>
    
                $(document).ready(function() {
                    $('.myTable tr').click(function(){
                        alert("you clicked the row");
                    });
    
    
                });
    
      $(function(){          
      $.ajax({
                    type: 'post',
                    url: 'loadmytablepage.php',
                    success: function(data){
                        $('#tablecontainer').html(data);
    
                    }
    
                });
    
            });
    
        </script>
    this will not alert..i don't know why.

  11. #36
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    That's because you are adding elements to the DOM dynamically (i.e. via AJAX).

    Use .on() and a parent element that is present on page load.

    E.g.

    Code JavaScript:
    $(document).on("click", ".myTable tr", function(){
      alert("you clicked the row");
    });

  12. #37
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, Thank you for the quick reply and for enlighten my mind it's working so this what the .on used for...i can now clicked the row requested via ajax.

    so let me explain as what i have understand so if we going to click any element that was requested via ajax we should use .on function ?

    Thank you so much okay i will try now your new demo .i'll be back

  13. #38
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by jemz View Post
    so let me explain as what i have understand so if we going to click any element that was requested via ajax we should use .on function ?
    Yes.
    You see, when the code that is within document.ready fires after the page has loaded, the table you are trying to attach an event handler to, doesn't exist in the DOM.
    To get around this, you select an element that does exist and using .on(), and attach the required behaviour to that.

    It can also be used when you are creating elements dynamically (not only loading them via ajax).

  14. #39
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, Is it okay to load in a div,not to prepend in the body?what is the purpose for putting the function shortpagination() in the success ?

  15. #40
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi jemz,

    I made you a new demo using AJAX to pull in the table, then initialize the pagination.
    It all worked pretty much as expected, although I had to wrap the initialization of the pagination in a function, which was then called after the AJAX query had completed successfully.

    To be complete, here's the code:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <!--http://www.sitepoint.com/forums/showthread.php?989241-I-am-stuck-on-this-jquery-->
        <title>jqPagination example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script src="https://raw.github.com/beneverard/jqPagination/master/js/jquery.jqpagination.js"></script>
        <link rel="stylesheet" type="text/css" href="https://raw.github.com/beneverard/jqPagination/master/css/jqpagination.css" />
      </head>
    
      <body>
        <div class="pagination">
          <a href="#" class="first" data-action="first"></a>
          <a href="#" class="previous" data-action="previous"></a>               
          <input type="text" readonly="readonly" />
          <a href="#" class="next" data-action="next"></a>
          <a href="#" class="last" data-action="last"></a>
        </div>
        
        <script>
          $(document).ready(function() {
            function sortPagination(){
              $('.myTable tr').hide().filter(':lt(2)').show();
              $('.pagination').jqPagination({
                max_page : $('.myTable tr').length -1,
                paged : function(page) {
                  $('.myTable tr:not(:first)').hide();
                  $($('.myTable tr')[page]).show();
                }
              });
            }
            
            $.ajax({
              type: "POST",
              dataType: 'html',
              url: "ajax.php",
              success: function(data){
                $("body").prepend(data);
                sortPagination();
              }
            });        
          });
        </script>
      </body>
    </html>
    ajax.php

    Code:
    <?php
    echo("
    <table width=\"200\" border=\"1\" class=\"myTable\">
          <tr class=\"sticky\">
            <th>ID</th>
            <th>Studname</th>
            <th>Age</th>
          </tr>
          <tr>
            <td>91</td>
            <td>shane</td>
            <td>20</td>
          </tr>
          <tr>
            <td>92</td>
            <td>charlie</td>
            <td>20</td>
          </tr>
          <tr>
            <td>93</td>
            <td>melli</td>
            <td>25</td>
          </tr>
          <tr>
            <td>94</td>
            <td>mike</td>
            <td>26</td>
          </tr>
          <tr>
            <td>95</td>
            <td>harry</td>
            <td>29</td>
          </tr>
          <tr>
            <td>96</td>
            <td>tom</td>
            <td>20</td>
          </tr>
          <tr>
            <td>97</td>
            <td>jack</td>
            <td>20</td>
          </tr>
          <tr>
            <td>98</td>
            <td>feld</td>
            <td>27</td>
          </tr>
          <tr>
            <td>99</td>
            <td>marie</td>
            <td>26</td>
          </tr>
          <tr>
            <td>100</td>
            <td>tora</td>
            <td>24</td>
          </tr>
          <tr>
            <td>101</td>
            <td>jammy</td>
            <td>30</td>
          </tr>
        </table>
    ");		
    ?>
    HTH


    Hi pullo, it's working now great!!! i can request via ajax and i can now paginate I also tried your new demo

    Thank you so much pullo.

  16. #41
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi pullo, Is it okay to load in a div,not to prepend in the body?
    Both is fine.
    I was unaware of your page structure, so I chose to prepend to the body, as that had to be there.

    Quote Originally Posted by jemz View Post
    what is the purpose for putting the function shortpagination() in the success ?
    Not to sure how the pagination functionality works.
    This way, at least it is called after that AJAX response has returned.
    Maybe this is not necessary.
    Why don't you play around with it and see what works.


    Quote Originally Posted by jemz View Post
    Hi pullo, it's working now great!!! i can request via ajax and i can now paginate I also tried your new demo
    Thank you so much pullo.
    No problem. You're welcome.

  17. #42
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, is it possible that every page we will show 5 rows in the table,example if i will click next it will display the 5 sets or 5 row in my table.?

    Thank you in advance.

  18. #43
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    Assuming that your pagination logic is still in a function:

    Code JavaScript:
    function sortPagination(){
      $('.myTable tr').hide().filter(':lt(6)').show();
      $('.pagination').jqPagination({
        max_page : Math.ceil($('.myTable tr').length /5),
        paged : function(page) {
          $('.myTable tr:not(:first)').hide();
          var index = ((page-1)*5)+1;
          for (var i=0; i<5; i++){
            $($('.myTable tr')[index]).show();
            index ++;
          }
        }
      });
    }

  19. #44
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, Okay as i undersstand on this

    First you divide the length it by 5 and then the result with that you get the ceil ?
    max_page : Math.ceil($('.myTable tr').length /5),
    and also this you multiply by 5 and you plus 1,why is it plus 1 ?
    var index = ((page-1)*5)+1;

    Thank you for the quick reply

  20. #45
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hey jemz,

    max_page is a variable, indicating how many pages (or sets) there will be to paginate through.
    As you want to display 5 records (table rows) on each page we have to get the total amount of rows and divide it by five.
    In the case that the result is not a whole number, we round it up to the next integer using Math.ceil.

    e.g. 15 rows
    15/5 = 3

    e.g. 16 rows
    16/5 = 3.2.
    Math.ceil(3.2) = 4

    Quote Originally Posted by jemz View Post
    you multiply by 5 and you plus 1,why is it plus 1 ?
    The plus one accounts for the table header (which is also a table row).

    HTH

  21. #46
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, Thank you again for this...it's working paginating 5 rows.

  22. #47
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Yay

  23. #48
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,104
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Yay
    Hi pullo, I get back to you because i have problem on loading my page with pagination,...when i tried to put my page on the host,my page is very slow in displaying the pagination.Does this affect in the code that we use?

  24. #49
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by jemz View Post
    Does this affect in the code that we use?
    Not really.
    Can you post a link to your code on your hosts servers.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •