Using tablesorter jquery plugin on table with jquery ypagination

Using tablesorter jquery plugin on table with jquery ypagination

This is the table sorter i desire to implement, if that's possible.


This is my scenario


With the following code


  2. <?php require_once("includes/connection.php"); ?>   
  3. <?php require_once("includes/functions.php"); ?>
  4. <?php include_once("includes/form_functions.php");?>
  5. <?php include_once("includes/html.php");?>
  6. <?php include_once("includes/pagination.php");?>
  7. <?php
  8. echo @get_country();//members array to be used to populate table
  9. ?>
  10.   <script type="text/javascript">








  15.             // This file demonstrates the different options of the pagination plugin
  16.             // It also demonstrates how to use a JavaScript data structure to
  17.             // generate the paginated content and how to display more than one
  18.             // item per page with items_per_page.


  20.             /**
  21.              * Callback function that displays the content.
  22.              *
  23.              * Gets called every time the user clicks on a pagination link.
  24.              *
  25.              * @param {int}page_index New Page index
  26.              * @param {jQuery} jq the container with the pagination links as a jQuery object
  27.              */
  28.             function pageselectCallback(page_index, jq){
  29.                 // Get number of elements per pagionation page from form
  30.                 var newcontent ='';
  31.                 var items_per_page = $('#items_per_page').val();
  32.                 var max_elem = Math.min((page_index+1) * items_per_page, <?php echo @country_count_all(); ?>);
  33.                 var newcontent = '<thead><tr><th>Nome</th><th>Nome Local</th></tr><thead>';
  34.                 // Iterate through a selection of the content and build an HTML string
  35.                 
  36.                 for(var i=page_index*items_per_page;i<max_elem;i++)
  37.                 {
  38.                     newcontent += '<tr>';
  39.                     newcontent += '<td>' + members[i][0] + '</td>';
  40.                     newcontent += '<td>' + members[i][1] + '</td>';
  41.                     newcontent += '</tr>';
  42.                 }


  44.                 // Replace old content with new content
  45.                 $('#Searchresult').html(newcontent);


  47.                 // Prevent click eventpropagation
  48.                 return false;
  49.             }


  51.             // The form contains fields for many pagiantion optiosn so you can
  52.             // quickly see the resuluts of the different options.
  53.             // This function creates an option object for the pagination function.
  54.             // This will be be unnecessary in your application where you just set
  55.             // the options once.
  56.             function getOptionsFromForm(){
  57.                 var opt = {callback: pageselectCallback};
  58.                 // Collect options from the text fields - the fields are named like their option counterparts
  59.                 $("input:text").each(function(){
  60.                     opt[this.name] = this.className.match(/numeric/) ? parseInt(this.value) : this.value;
  61.                 });
  62.                 // Avoid html injections in this demo
  63.                 var htmlspecialchars ={ "&":"&amp;", "<":"&lt;", ">":"&gt;", '"':"&quot;"}
  64.                 $.each(htmlspecialchars, function(k,v){
  65.                     opt.prev_text = "Anterior";//opt.prev_text.replace(k,v);
  66.                     opt.next_text = "Seguinte"; //opt.next_text.replace(k,v);
  67.                 })
  68.                 return opt;
  69.             }


  71.             // When document has loaded, initialize pagination and form
  72.             $(document).ready(function(){
  73.                 // Create pagination element with options from form
  74.                 var optInit = getOptionsFromForm();
  75.                 $("#Pagination").pagination(<?php echo @country_count_all(); ?>, optInit);


  77.                 // Event Handler for for button
  78.                 $("#setoptions").click(function(){
  79.                     var opt = getOptionsFromForm();
  80.                     // Re-create pagination content with new parameters
  81.                     $("#Pagination").pagination(<?php echo @country_count_all(); ?>, opt);
  82.                 });


  84.             });


  86.   </script>
  87. <div id="site_content">


  89.     <div id="content">


  91.             <div class="registos"><?php echo @country_count_all(); ?> Registos</div>


  93.               <table class="tablesorter" style='width:100%; border-spacing:0;' id="Searchresult">


  95.               </table>
  96.             <div id="Pagination" class="pagination"></div>  
  97. <div style="display:none;">                        
  98. <label for="items_per_page">Number of items per page</label><input type="text" value="20" name="items_per_page" id="items_per_page" class="numeric"/>
  99. <label for="num">Number of start and end points</label><input type="text" value="2" name="num_edge_entries" id="num_edge_entries" class="numeric"/>
  100. </div>
  101.  </div>
  102. <div class="clearFix"></div>
  103. </div>
And the function @get_country()


  2. function get_country(){
  3. global $connection;
  4. $filter = $_SESSION['registry'];
  5. $script = "";
  6. $script = "<script type=\"text/javascript\" >
  7.         var members = [";
  8.         $query = "SELECT country.Name, country.LocalName
  9.         FROM country";
  10.             $result_set = mysql_query($query);
  11.             //$numRows = mysql_num_rows($result_set);
  12.             //echo $query;
  13.             while($data =  mysql_fetch_array($result_set)){
  14.             $script .= "[";
  15.                $script .= "'".$data['Name']."', ";
  16.                $script .= "'".$data['LocalName']."' ";
  17.                $script .= "],";
  18.             }  
  19.         $script .="]</script>";


  21.     return $script;
  22. }
I made several attempts to make this work and unfortunately none was successful.

Tks in advance