Google Like Pagination using Jquery -

here have

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li>  <li>7</li>  <li>8</li>  <li>9</li>  <li>10</li>  <li>11</li>  <li>12</li>  <li>13</li>  <li>14</li>  <li>15</li>  <li>16</li>  <li>17</li>  <li>18</li>  <li>19</li>  <li>20</li> </ul> 

initally showing 10 li's, when user comes 10th page need hide visible 10 li's , show next 10 li's , should work in vice versa using jquery ... pagination in google ..

i have tried below code :

var currentindex = $("div#pagination ul").children('li:visible').eq(-2).index();  var nextindex = currentindex + 10;  $("div#pagination ul li:not(':first'):not(':last')").hide();  $('div#pagination ul li:lt(' + nextindex + '):gt(' + currentindex + ')').show();  

first & last li prev & next buttons, need show , hide between these buttons

thanks ...

solution : not effective works ...

solution :

var e = currentpage,r=lastpage;  if(e >= 10 && e<20) {     $("div#pagination ul li:not(':first'):not(':last')").hide();     $("div#pagination ul li:lt(21):gt(9)").show(); } else if(e >=20) {     $("div#pagination ul li:not(':first'):not(':last')").hide();     $("div#pagination ul li:lt("+(r+1)+"):gt(19)").show(); } else {     $("div#pagination ul li:not(':first'):not(':last')").hide();     $("div#pagination ul li:lt(11):gt(0)").show(); }