Question

I got a long list from server, I would like to show each element of the list in a row of a table:

<table class="list-content">
   <!-- 1st element-->
   <tr id="elem_1">
      <td>... </td>
      <td>... </td>
   </tr>

   <!-- 2nd element-->
   <tr id="elem_2">
      <td>... </td>
      <td>... </td>
   </tr>    

   <!-- 3rd element-->
   <tr id="elem_2">
      <td>... </td>
      <td>... </td>
   </tr>

   ...
   ...
   <!-- n-th element-->
   <tr id="elem_n">
      <td>... </td>
      <td>... </td>
   </tr>
</table>

Since the list is large, I would like to have a list paging under the table, each page show only 10 elements:

<table class="list-content">

   <!-- SHOW 10 elements here -->

</table>
<div id="page-idx">

    <!-- list page number shows here -->
    <ul><li>1</li><li>2</li></ul>...

</div>

my quesitions:

1. For the list paging (page-idx), I am intend to use unordered li for each page number, but it shows the page numbers vertically, how to change it to show the page numbers horizontally?

2. And the number of pages is dynamically calculated based on the number of elements server returns, how to update the paging number using jQuery? (That’s in the html, the <ul> is empty, jquery update the number of pages)

Answer 1

Why floating? This a really bad idea. You can just simply use css to set the list-style horizontally.

#page-idx li{
    list-style:none;
    display:inline;
}

Here is an example: http://jsfiddle.net/8qcWT/