$('#red').smartpaginator({ totalrecords: 100, 

                                      recordsperpage: 10,

                                      theme: 'red', 


                                      onchange: function(newPage) {

                                            $('#r').html('Page # ' + newPage);




This demo shows the use of onchange callback, on each page click you'll get the new page no. So, you can pull data from your datasource, probably database or some xml file. Smart Pagination can also filter your data automatically, this is usefull if you only want client side pagination. Obvioulsy this will be suitable only for small data. It also keeps first,prev,next, last buttons always visible using the 'controlsalways' property. Click on Demo 2 to see and example.

Page # 1

         $('#green').smartpaginator({ totalrecords: 10,

                                      recordsperpage: 3, 

                                      datacontainer: 'mt', 

                                      dataelement: 'tr',

                                      theme: 'green' });


This demo shows how Smart Paginator can filter your data automatically. Here we have an HTML table with 10 rows and 6 columns, and we want 3 recods to be displayed on each page. For this you need to pass the id of the HTML table you want Smart Paginator to filter see the datacontainer property, and you also need to set the dataelement tag which is 'tr' for a table. 'datacontainer' and 'dataelement' properties establish parent child relation, you can pass any element other than table as 'datacontainer' and set the 'dataelement', Smart Paginator will filter the 'dataelements' gracefull. See Demo 3 for for an example of this.

Col1 Col2 Col3 Col4 Col5 Col6
01 02 03 04 05 06
11 12 13 14 15 16
21 22 23 24 25 26
31 32 33 34 35 36
41 42 43 44 45 46
51 52 53 54 55 56
61 62 63 64 65 66
71 72 73 74 75 76
81 82 83 84 85 86
91 92 93 94 95 96

          $('#black').smartpaginator({ totalrecords: 5,

                                        recordsperpage: 1,

                                        datacontainer: 'divs', 

                                        dataelement: 'div',

                                        theme: 'black' });


This demo shows the use of Smart Paginator with HTML elements other than table. See how divs are displayed according to current page.

jQuery Content Slider: jsCarousel

jsCarousel is a jquery slider plugin that slides contents in multi direction. jsCarousel slider can be used as a feature content slider as well. You can put any kind of contents you want whether images, text, videos, news etc. it's up to you. One interesting thing about jsCarousel slider is that you can make simple image gallery with thumbnail support by using it. jsCarousel slider plugin gives you the source of image via callback function, when you click on some image within slider. See Using jsCarousel Slider section below to get an idea about using the callback function.

jQuery Image Preload Plugin: Smart Preload

Smart Preloader is a small jQuery image preloading plugin that helps you preload all the required images. Smart perloader plugin takes an array of images and notifies via "oneachimageload" on each image load, and once all the images are loaded "onloadall" callback functions is called. Both the "oneachimageload" and "onloadall" functions are passed as parameters to Smart Preloader initializer function.

jQuery Pagination Plugin: Smart Paginator

Smart Paginator is a comprehensive jQuery Pagination plugin that makes adding pagination very simple task, all the navigation logic is built in and it is also very customizable. Smart Paginator supports variety of parameters and custom themes, that can be used to customize the look and feel to your desire.

jQuery Spin Button Plugin: Smart Spin

Smart spin is a jQuery spin button plugin that mimics the very common windows spin button control. Smart spin allows you to select a value between minimum and maximum values using either mouse or keyboard. You can also enter a value via keyboard. Smart spin contains a text box and "up" "down" buttons, it also supports "masking"(text that appears when the control looses focus). Clicking the "up" button causes the value to increment by step value (step value is configurable, default is 1), while clicking the "down" button causes the value to decrement by step value. Clicking up/down buttons and holding the left mouse button causes the values to change more rapidly.

jQuery Slider/Trackbar Plugin: Smart Slider

Smart Slider is a jQuery plugin that mimics the very common user interface track bar component, which consists of a slider bar and tracker/pointer, where tracker can be moved back and forth along the slider bar to select a value. Smart Slider comes in three different styles with variety of custom parameters. You can also use your own custom styles simply by defining your custom CSS classes. Smart Slider supports different styles and custom themes. Using Smart Slider plugin is also very simple, you just need a block element, Smart Slider script and CSS file, Smart Slider automatically generate track bar UI.