Custom pageing plugin in jquery -
i have build custom paging plugin in jquery. have write code stuck in 1 place paging default number 10 page when user click on greater page 8 should show 2 further page. expected result shown below. fiddle
$(function(){ $.fn.pageing= function(options){ var settings =$.extend({ // these defaults. totalpage: $(this).find('li').length, currentpage: 2, defaultdisplay:10 }, options), el= this; var defaultfunction= { showdefault: function(){ for(i=0; i<(settings.defaultdisplay);i++){ $(el).find('li').eq(i).show() } }, selectcurrentpage: function (){ $(el).find('li:eq('+settings.currentpage+')').addclass('active') } } defaultfunction.showdefault(); defaultfunction.selectcurrentpage(); } $('ul').pageing({defaultdisplay:10}) })
i have worked on more , find 1 solution. fiddle
$(function(){ var apply= { init: function (settings){ if(apply.isnegative(settings.moving-settings.defaultdisplay) && settings.currentpage>settings.moving){ apply.nextpage=math.abs(settings.moving-settings.currentpage); apply.moveto=math.abs(settings.moving-settings.currentpage); } for(apply.nextpage; apply.nextpage<(settings.defaultdisplay+apply.moveto);apply.nextpage++){ $(this).find('li').eq(apply.nextpage).show() } $(this).find('li:eq('+settings.currentpage+')').addclass('active'); }, isnegative: function(val){ if(val > -1) return false else return true }, nextpage:0, moveto:0 } $.fn.pageing= function(options){ var settings =$.extend({ // these defaults. totalpage: $(this).find('li').length, currentpage: 8, defaultdisplay:10, moving:7 }, options), el= this; apply.init.call(this,settings) } $('ul').pageing({defaultdisplay:10}) }) </script> </head> <body> <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> </ul> 
Comments
Post a Comment