CODEWITHSUNDEEP
htmlcss
Leem
Leem

Reputation: 18318

A simple question: what html element should be used as a list paging?

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)

Upvotes: 0

Views: 144

Answers (5)

Samich
Samich

Reputation: 30145

Apply some styles to your paging html: 

#page-idx ul li { float:left; }
#page-idx ul li a { padding:3px; text-decoration:none; }

http://jsfiddle.net/SUqzs/2/

Upvotes: 0

JNDPNT
JNDPNT

Reputation: 7465

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/

Upvotes: 3

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

li{display:inline; margin: 0px 5px;} this will place all li horizontally, without mucking up any page layout.

Upvotes: 0

martincarlin87
martincarlin87

Reputation: 11052

to get the page numbers going horizontally try something like:

li { list-style: none; display: inline; float: left;}

and see if that does it, then you can style it to suit.

As for updating the page numbers, have the jquery code that does it initially inside a function and whenever you click another page number call the function to update the pagenumbers again.

Hard to be helpful without seeing the code you are using for the pagination.

Upvotes: -1

mooglife
mooglife

Reputation: 226

in your css : li{ float:left;} this will place all li horizontally

Upvotes: 0

Related Questions