DataTables bootstrap style pagination How to add first page and last page (citation)

Locate DataTables.bootstrap.js (version 3): (The file name in this project is: datatableext.js)

1$.fn.datatableext.oapi.fnpaginginfo =function(osettings)2 {3     return {4"IStart": Osettings._idisplaystart,5"Iend": Osettings.fndisplayend (),6"Ilength": Osettings._idisplaylength,7"Itotal": Osettings.fnrecordstotal (),8"Ifilteredtotal": Osettings.fnrecordsdisplay (),9"IPage": osettings._idisplaylength = = =-1?Ten0:math.ceil (Osettings._idisplaystart/osettings._idisplaylength), One"iTotalPages": osettings._idisplaylength = = =-1? A0:math.ceil (Osettings.fnrecordsdisplay ()/osettings._idisplaylength) -     }; - } the   - /*Bootstrap style pagination control*/ - $.extend ($.fn.datatableext.opagination, { -"Bootstrap": { +"Fninit":function(osettings, npaging, Fndraw) { -             varOlang =oSettings.oLanguage.oPaginate; +             varFnclickhandler =function(e) { A E.preventdefault (); at                 if(Osettings.oapi._fnpagechange (osettings, e.data.action)) { - Fndraw (osettings); -                 } -             }; -   -$ (npaging). addclass (' pagination '). Append ( in' <ul> ' + -' <li class= ' sfirst disabled ' ><a href= ' # ' > ' + olang.sfirst + ' </a></li> ' +//Add first page display to' <li class= ' prev disabled ' ><a href= ' # ' > ' + olang.sprevious + ' </a></li> ' +//' <li class= ' prev disabled ' ><a href= ' # ' >&larr; ' +olang.sprevious+ ' </a></li> ' + +' <li class= ' next disabled ' ><a href= ' # ' > ' + olang.snext + ' </a></li> ' +//' <li class= ' next disabled ' ><a href= ' # ' > ' +olang.snext+ ' &rarr; </a></li> ' + -' <li class= ' slast disabled ' ><a href= ' # ' > ' + olang.slast + ' </a></li> ' +//Add last Display the' </ul> ' *             ); $             varEls = $ (' a ', npaging);Panax Notoginseng$ (els[0]). bind (' click. DT ', {action: "First"}, Fnclickhandler);//Binding first Page event -$ (els[1]). bind (' click. DT ', {action: ' previous '}, Fnclickhandler); the$ (els[2]). bind (' click. DT ', {action: "Next"}, Fnclickhandler); +$ (els[3]). bind (' click. DT ', {action: "Last"}, Fnclickhandler);//bind last Event A             //$ (els[0]). bind (' click. DT ', {action: "previous"}, Fnclickhandler); the             //$ (els[1]). bind (' click. DT ', {action: "Next"}, Fnclickhandler); +         }, -   $"Fnupdate":function(osettings, Fndraw) { $             varIlistlength = 5; -             varOpaging =oSettings.oInstance.fnPagingInfo (); -             varan =OSETTINGS.AANFEATURES.P; the             varI, J, Sclass, IStart, Iend, Ihalf=math.floor (ILISTLENGTH/2); -  Wuyi             if(Opaging.itotalpages <ilistlength) { theIStart = 1; -Iend =opaging.itotalpages; Wu             } -             Else if(Opaging.ipage <=ihalf) { AboutIStart = 1; $Iend =ilistlength; -}Else if(Opaging.ipage >= (opaging.itotalpages-ihalf)) { -IStart = opaging.itotalpages-ilistlength + 1; -Iend =opaging.itotalpages; A}Else { +IStart = opaging.ipage-ihalf + 1; theIend = IStart + iListLength-1; -             } $   the              for(I=0, ilen=an.length; i<ilen; i++ ) { the                 //Remove the middle elements the$ (' li:gt (1) ', An[i]). Filter (': LT ( -2) '). Remove ();//Modify $ (' li:gt (0) ', An[i]) here. Filter (': Not (: last) '). Remove (); the   -                 //ADD The new list items and their event handlers in                  for(J=istart; j<=iend; j + + ) { theSclass = (j==opaging.ipage+1)? ' class= ' "Active" ': '; the$ (' <li ' +sclass+ ' ><a href= "#" > ' +j+ ' </a></li> ') About. InsertBefore ($ (' Li:eq ( -2) ', an[i]) [0])//modify here. InsertBefore ($ (' Li:last ', An[i]) [0]) the. bind (' click ',function(e) { the E.preventdefault (); theOsettings._idisplaystart = (parseint ($ (' a ', This). Text (), 10)-1) *opaging.ilength; + Fndraw (osettings); -                         } ); the                 }Bayi   the                 //add/remove disabled classes from the static elements the                 if(Opaging.ipage = = 0 ) { -$ (' Li:lt (2) ', An[i]). addclass (' disabled ');//Modify $ (' Li:first ', An[i]) here. addclass (' disabled '); -}Else { the$ (' Li:lt (2) ', An[i]). Removeclass (' disabled ');//Modify $ (' Li:first ', An[i]) here. Removeclass (' disabled '); the                 } the   the                 if(Opaging.ipage = = = Opaging.itotalpages-1 | | opaging.itotalpages = = 0 ) { -$ (' Li:gt ( -3) ', An[i]). addclass (' disabled ');//Modify $ (' Li:last ', An[i]) here. addclass (' disabled '); the}Else { the$ (' Li:gt ( -3) ', An[i]). Removeclass (' disabled ');//Modify $ (' Li:last ', An[i]) here. Removeclass (' disabled '); the                 }94             } the         } the     } the} );

To display the effect before changing:

After changing to show the effect:

DataTables bootstrap style pagination How to add first page and last page (citation)