Question

I am using the Jquery pagination plugin

http://plugins.jquery.com/project/pagination

to paginate the rows in a table.

I also use a little tip provided in another SO question here to correct a bug in the original example…

The code is working fine in FireFox and Chrome but not in IE6+… Here is my javascript to initialize and run the pagination…

function pageselectCallback(page_index, jq){
              var items_per_page = pagination_options.items_per_page;
              var offset = page_index * items_per_page;
              var new_content = $('#hiddenresult tr.result').slice(offset, offset + items_per_page).clone();



               $('#Searchresult').empty().append(new_content);


              return false;
            }

            var pagination_options = {
                  num_edge_entries: 2,
                  num_display_entries: 8,
                  callback: pageselectCallback,
                  items_per_page:3
                }



            /**
             * Callback function for the AJAX content loader.
             */
            function initPagination() {
                var num_entries = $('#hiddenresult tr.result').length;
                // Create pagination element

                 $("#Pagination").pagination(num_entries, pagination_options);
            }

            // Load HTML snippet with AJAX and insert it into the Hiddenresult element
            // When the HTML has loaded, call initPagination to paginate the elements
            $(document).ready(function(){
                initPagination();
            });

The Table structure is

// Table to display the paginated data
<table>
  <tr>
   <td>
      <div id="Pagination" class="pagination">
      </div>
        <br style="clear:both;" />
      <div id="Searchresult" style="height:auto;">
      This content will be replaced when pagination inits.
     </div>
   </td>
 </tr>
</table>


// Table containing the rows that are to be paginated
<table id="hiddenresult" style="display:none;">
  <tr>
    <td>   

 <table>
      <tr> // 1st row
         <td>
             <table>
                <tr>
                   <td>
                   </td>
                </tr>
                <tr>
                   <td>
                   </td>
                </tr>
             </table>

             <table>
                 <thead>
                    <tr>
                    </tr> etc...
                 </thead>
                 <tbody>
                     <tr>

                     </tr> etc etc...
                 </tbody>
             </table>
         </td>
      </tr> // end 1st row

     <tr> //2nd row
         <td>
             <table>
                <tr>
                   <td>
                   </td>
                </tr>
                <tr>
                   <td>
                   </td>
                </tr>
             </table>

             <table>
                 <thead>
                    <tr>
                    </tr> etc...
                 </thead>
                 <tbody>
                     <tr>

                     </tr> etc etc...
                 </tbody>
             </table>
         </td>
      </tr> //end 2nd row

    etc etc etc....
    </table>

 </td>
</tr>
</table> // id = "hiddenresult"

The way i see it the plugin get’s initialized in IE but the bug is in displaying the paginated rows… But cannot figure out where it is or how to correct it…
Thanks a lot for your suggestions….

Answer 1

fixed it…!!!

This is the code….!!

 function pageselectCallback(page_index, jq){
                var items_per_page = pagination_options.items_per_page;
                var offset = page_index * items_per_page;
                var new_content = $('#hiddenresult tr.result').slice(offset, offset + items_per_page).clone();


               if(navigator.appName == "Microsoft Internet Explorer"){
                   // This is to fix an IE bug that won't properly append the cloned html to the 
                   // Searchresult div. So we first append the cloned html to a dummy div and
                   // then use javascript innerhtml property to copy to the actual div.
                   $('#justDiv').empty().append(new_content);

                    var content = document.getElementById("justDiv").innerHTML;

                    document.getElementById("Searchresult").innerHTML = content;
              }
                else{
                    $('#Searchresult').empty().append(new_content);
                }


                return false;
            }

Cheers everybody…!!!

I know this is not very neat… and i am still open for suggestions… So.. all are welcome… thanks