From d164b45af59c71bdfd753dbcc5ff2bf6fbc8360a Mon Sep 17 00:00:00 2001
From: Tuan Duong <bacduong@gmail.com>
Date: Sun, 15 Oct 2017 14:42:32 +0700
Subject: [PATCH] - Add support for "ul" in pagination navigation - Add support
 for extra class in pagination navigation

2 new configs are added:
- navElement: 'ul' (ul > li > a) or 'div' (div > a)
- navElementClass: extra classes
---
 lib/jquery.easyPaginate.js | 63 ++++++++++++++++++++++++++++++++------
 1 file changed, 53 insertions(+), 10 deletions(-)

diff --git a/lib/jquery.easyPaginate.js b/lib/jquery.easyPaginate.js
index 9f959de..a6ad691 100644
--- a/lib/jquery.easyPaginate.js
+++ b/lib/jquery.easyPaginate.js
@@ -36,7 +36,9 @@ $.fn.easyPaginate = function (options) {
         prevButton: true,
         prevButtonText: '<',        
         nextButton: true,
-        nextButtonText: '>'
+        nextButtonText: '>',
+        navElement: 'div', // 'ul' for ul > li > a, 'div' for div > a
+        navElementClass: '',
     }
         
     return this.each (function (instance) {        
@@ -56,29 +58,70 @@ $.fn.easyPaginate = function (options) {
         };
         
         var displayNav = function() {
-            htmlNav = '<div class="easyPaginateNav">';
-            
-            if(plugin.settings.firstButton) {
+            var navElementClass = plugin.settings.navElementClass === ''
+                ? 'easyPaginateNav'
+                : 'easyPaginateNav ' + plugin.settings.navElementClass;
+            if (plugin.settings.navElement === 'ul') {
+                htmlNav = '<ul class="' + navElementClass + '">';
+            } else {
+                htmlNav = '<div class="' + navElementClass + '">';
+            }
+
+            if (plugin.settings.firstButton) {
+                if (plugin.settings.navElement === 'ul') {
+                    htmlNav += '<li>';
+                }
                 htmlNav += '<a href="#'+plugin.settings.hashPage+':1" title="First page" rel="1" class="first">'+plugin.settings.firstButtonText+'</a>';
+                if (plugin.settings.navElement === 'ul') {
+                    htmlNav += '</li>';
+                }
             }
             
-            if(plugin.settings.prevButton) {
+            if (plugin.settings.prevButton) {
+                if (plugin.settings.navElement === 'ul') {
+                    htmlNav += '<li>';
+                }
                 htmlNav += '<a href="" title="Previous" rel="" class="prev">'+plugin.settings.prevButtonText+'</a>';
+                if (plugin.settings.navElement === 'ul') {
+                    htmlNav += '</li>';
+                }
             }
             
-            for(i = 1;i <= plugin.settings.pages;i++) {
+            for (i = 1;i <= plugin.settings.pages;i++) {
+                if (plugin.settings.navElement === 'ul') {
+                    htmlNav += '<li>';
+                }
                 htmlNav += '<a href="#'+plugin.settings.hashPage+':'+i+'" title="Page '+i+'" rel="'+i+'" class="page">'+i+'</a>';
+                if (plugin.settings.navElement === 'ul') {
+                    htmlNav += '</li>';
+                }
             };
             
-            if(plugin.settings.nextButton) {
+            if (plugin.settings.nextButton) {
+                if (plugin.settings.navElement === 'ul') {
+                    htmlNav += '<li>';
+                }
                 htmlNav += '<a href="" title="Next" rel="" class="next">'+plugin.settings.nextButtonText+'</a>';
+                if (plugin.settings.navElement === 'ul') {
+                    htmlNav += '</li>';
+                }
             }
             
-            if(plugin.settings.lastButton) {
+            if (plugin.settings.lastButton) {
+                if (plugin.settings.navElement === 'ul') {
+                    htmlNav += '<li>';
+                }
                 htmlNav += '<a href="#'+plugin.settings.hashPage+':'+plugin.settings.pages+'" title="Last page" rel="'+plugin.settings.pages+'" class="last">'+plugin.settings.lastButtonText+'</a>';
+                if (plugin.settings.navElement === 'ul') {
+                    htmlNav += '</li>';
+                }
+            }
+
+            if (plugin.settings.navElement === 'ul') {
+                htmlNav += '</ul>';
+            } else {
+                htmlNav += '</div>';
             }
-            
-            htmlNav += '</div>';
             plugin.nav = $(htmlNav);
             plugin.nav.css({
                 'width': plugin.el.width()