Solved issue #69

.gitignore

@@ -6,4 +6,5 @@ src/*.map
 *~
 *.diff
 *.patch
-.DS_Store
+.DS_Store
+settings.json

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.3.1
+
+### Enhancements & Features
+- Replaced href attributes in order to prevent hash tags so *angular JS* works proper; see issue [#69](http://github.com/rstaib/jquery-bootgrid/issues/69) for more details
+
+### Breaking Changes
+There are no breaking changes but some HTML templates changed during development. In case you want to use the full new feature set be sure you did not override any affected (actionDropDownItem and paginationItem) templates.
+
 ## 1.3.0
 
 ### Enhancements & Features

bower.json

@@ -13,7 +13,7 @@
         "accessibility",
         "bootstrap"
     ],
-    "version": "1.3.0",
+    "version": "1.3.1",
     "authors": [
         {
             "name": "Rafael Staib",

demo/index.htm

@@ -189,7 +189,7 @@
                                 return "<a href=\"#\">" + column.id + ": " + row.id + "</a>";
                             }
                         },
-                        rowCount: [-1, 25, 50, 75]
+                        rowCount: [-1, 10, 50, 75]
                     });
                 }
 

dist/jquery.bootgrid.css

@@ -1,5 +1,5 @@
 /*! 
- * jQuery Bootgrid v1.3.0 - 09/04/2015
+ * jQuery Bootgrid v1.3.1 - 09/11/2015
  * Copyright (c) 2014-2015 Rafael Staib (http://www.jquery-bootgrid.com)
  * Licensed under MIT http://www.opensource.org/licenses/MIT
  */

dist/jquery.bootgrid.fa.js

@@ -1,5 +1,5 @@
 /*! 
- * jQuery Bootgrid v1.3.0 - 09/04/2015
+ * jQuery Bootgrid v1.3.1 - 09/11/2015
  * Copyright (c) 2014-2015 Rafael Staib (http://www.jquery-bootgrid.com)
  * Licensed under MIT http://www.opensource.org/licenses/MIT
  */

dist/jquery.bootgrid.fa.min.js

@@ -1,5 +1,5 @@
 /*! 
- * jQuery Bootgrid v1.3.0 - 09/04/2015
+ * jQuery Bootgrid v1.3.1 - 09/11/2015
  * Copyright (c) 2014-2015 Rafael Staib (http://www.jquery-bootgrid.com)
  * Licensed under MIT http://www.opensource.org/licenses/MIT
  */

dist/jquery.bootgrid.js

@@ -1,5 +1,5 @@
 /*! 
- * jQuery Bootgrid v1.3.0 - 09/04/2015
+ * jQuery Bootgrid v1.3.1 - 09/11/2015
  * Copyright (c) 2014-2015 Rafael Staib (http://www.jquery-bootgrid.com)
  * Licensed under MIT http://www.opensource.org/licenses/MIT
  */
@@ -495,16 +495,17 @@
         }
     }
 
-    function renderPaginationItem(list, uri, text, markerCss)
+    function renderPaginationItem(list, page, text, markerCss)
     {
         var that = this,
             tpl = this.options.templates,
             css = this.options.css,
-            values = getParams.call(this, { css: markerCss, text: text, uri: "#" + uri }),
+            values = getParams.call(this, { css: markerCss, text: text, page: page }),
             item = $(tpl.paginationItem.resolve(values))
                 .on("click" + namespace, getCssSelector(css.paginationButton), function (e)
                 {
                     e.stopPropagation();
+                    e.preventDefault();
 
                     var $this = $(this),
                         parent = $this.parent();
@@ -516,8 +517,8 @@
                             next: that.current + 1,
                             last: that.totalPages
                         };
-                        var command = $this.attr("href").substr(1);
-                        that.current = commandList[command] || +command; // + converts string to int
+                        var command = $this.data("page");
+                        that.current = commandList[command] || command;
                         loadData.call(that);
                     }
                     $this.trigger("blur");
@@ -550,14 +551,14 @@
             $.each(rowCountList, function (index, value)
             {
                 var item = $(tpl.actionDropDownItem.resolve(getParams.call(that,
-                    { text: getText(value), uri: "#" + value })))
+                    { text: getText(value), action: value })))
                         ._bgSelectAria(value === that.rowCount)
                         .on("click" + namespace, menuItemSelector, function (e)
                         {
                             e.preventDefault();
 
                             var $this = $(this),
-                                newRowCount = +$this.attr("href").substr(1);
+                                newRowCount = $this.data("action");
                             if (newRowCount !== that.rowCount)
                             {
                                 // todo: sophisticated solution needed for calculating which page is selected
@@ -566,7 +567,7 @@
                                 $this.parents(menuItemsSelector).children().each(function ()
                                 {
                                     var $item = $(this),
-                                        currentRowCount = +$item.find(menuItemSelector).attr("href").substr(1);
+                                        currentRowCount = $item.find(menuItemSelector).data("action");
                                     $item._bgSelectAria(currentRowCount === newRowCount);
                                 });
                                 $this.parents(menuSelector).find(menuTextSelector).text(getText(newRowCount));
@@ -1355,7 +1356,7 @@
         templates: {
             actionButton: "<button class=\"btn btn-default\" type=\"button\" title=\"{{ctx.text}}\">{{ctx.content}}</button>",
             actionDropDown: "<div class=\"{{css.dropDownMenu}}\"><button class=\"btn btn-default dropdown-toggle\" type=\"button\" data-toggle=\"dropdown\"><span class=\"{{css.dropDownMenuText}}\">{{ctx.content}}</span> <span class=\"caret\"></span></button><ul class=\"{{css.dropDownMenuItems}}\" role=\"menu\"></ul></div>",
-            actionDropDownItem: "<li><a href=\"{{ctx.uri}}\" class=\"{{css.dropDownItem}} {{css.dropDownItemButton}}\">{{ctx.text}}</a></li>",
+            actionDropDownItem: "<li><a data-action=\"{{ctx.action}}\" class=\"{{css.dropDownItem}} {{css.dropDownItemButton}}\">{{ctx.text}}</a></li>",
             actionDropDownCheckboxItem: "<li><label class=\"{{css.dropDownItem}}\"><input name=\"{{ctx.name}}\" type=\"checkbox\" value=\"1\" class=\"{{css.dropDownItemCheckbox}}\" {{ctx.checked}} /> {{ctx.label}}</label></li>",
             actions: "<div class=\"{{css.actions}}\"></div>",
             body: "<tbody></tbody>",
@@ -1368,7 +1369,7 @@
             loading: "<tr><td colspan=\"{{ctx.columns}}\" class=\"loading\">{{lbl.loading}}</td></tr>",
             noResults: "<tr><td colspan=\"{{ctx.columns}}\" class=\"no-results\">{{lbl.noResults}}</td></tr>",
             pagination: "<ul class=\"{{css.pagination}}\"></ul>",
-            paginationItem: "<li class=\"{{ctx.css}}\"><a href=\"{{ctx.uri}}\" class=\"{{css.paginationButton}}\">{{ctx.text}}</a></li>",
+            paginationItem: "<li class=\"{{ctx.css}}\"><a data-page=\"{{ctx.page}}\" class=\"{{css.paginationButton}}\">{{ctx.text}}</a></li>",
             rawHeaderCell: "<th class=\"{{ctx.css}}\">{{ctx.content}}</th>", // Used for the multi select box
             row: "<tr{{ctx.attr}}>{{ctx.cells}}</tr>",
             search: "<div class=\"{{css.search}}\"><div class=\"input-group\"><span class=\"{{css.icon}} input-group-addon {{css.iconSearch}}\"></span> <input type=\"text\" class=\"{{css.searchField}}\" placeholder=\"{{lbl.search}}\" /></div></div>",

package.json

@@ -2,7 +2,7 @@
     "name": "jquery-bootgrid",
     "namespace": "jquery.bootgrid",
     "title": "jQuery Bootgrid",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "description": "Nice, sleek and intuitive. A grid control especially designed for bootstrap.",
     "homepage": "http://www.jquery-bootgrid.com",
     "author": {

src/internal.js

@@ -485,16 +485,17 @@ function renderPagination()
     }
 }
 
-function renderPaginationItem(list, uri, text, markerCss)
+function renderPaginationItem(list, page, text, markerCss)
 {
     var that = this,
         tpl = this.options.templates,
         css = this.options.css,
-        values = getParams.call(this, { css: markerCss, text: text, uri: "#" + uri }),
+        values = getParams.call(this, { css: markerCss, text: text, page: page }),
         item = $(tpl.paginationItem.resolve(values))
             .on("click" + namespace, getCssSelector(css.paginationButton), function (e)
             {
                 e.stopPropagation();
+                e.preventDefault();
 
                 var $this = $(this),
                     parent = $this.parent();
@@ -506,8 +507,8 @@ function renderPaginationItem(list, uri, text, markerCss)
                         next: that.current + 1,
                         last: that.totalPages
                     };
-                    var command = $this.attr("href").substr(1);
-                    that.current = commandList[command] || +command; // + converts string to int
+                    var command = $this.data("page");
+                    that.current = commandList[command] || command;
                     loadData.call(that);
                 }
                 $this.trigger("blur");
@@ -540,14 +541,14 @@ function renderRowCountSelection(actions)
         $.each(rowCountList, function (index, value)
         {
             var item = $(tpl.actionDropDownItem.resolve(getParams.call(that,
-                { text: getText(value), uri: "#" + value })))
+                { text: getText(value), action: value })))
                     ._bgSelectAria(value === that.rowCount)
                     .on("click" + namespace, menuItemSelector, function (e)
                     {
                         e.preventDefault();
 
                         var $this = $(this),
-                            newRowCount = +$this.attr("href").substr(1);
+                            newRowCount = $this.data("action");
                         if (newRowCount !== that.rowCount)
                         {
                             // todo: sophisticated solution needed for calculating which page is selected
@@ -556,7 +557,7 @@ function renderRowCountSelection(actions)
                             $this.parents(menuItemsSelector).children().each(function ()
                             {
                                 var $item = $(this),
-                                    currentRowCount = +$item.find(menuItemSelector).attr("href").substr(1);
+                                    currentRowCount = $item.find(menuItemSelector).data("action");
                                 $item._bgSelectAria(currentRowCount === newRowCount);
                             });
                             $this.parents(menuSelector).find(menuTextSelector).text(getText(newRowCount));

src/public.js

@@ -397,7 +397,7 @@ Grid.defaults = {
     templates: {
         actionButton: "<button class=\"btn btn-default\" type=\"button\" title=\"{{ctx.text}}\">{{ctx.content}}</button>",
         actionDropDown: "<div class=\"{{css.dropDownMenu}}\"><button class=\"btn btn-default dropdown-toggle\" type=\"button\" data-toggle=\"dropdown\"><span class=\"{{css.dropDownMenuText}}\">{{ctx.content}}</span> <span class=\"caret\"></span></button><ul class=\"{{css.dropDownMenuItems}}\" role=\"menu\"></ul></div>",
-        actionDropDownItem: "<li><a href=\"{{ctx.uri}}\" class=\"{{css.dropDownItem}} {{css.dropDownItemButton}}\">{{ctx.text}}</a></li>",
+        actionDropDownItem: "<li><a data-action=\"{{ctx.action}}\" class=\"{{css.dropDownItem}} {{css.dropDownItemButton}}\">{{ctx.text}}</a></li>",
         actionDropDownCheckboxItem: "<li><label class=\"{{css.dropDownItem}}\"><input name=\"{{ctx.name}}\" type=\"checkbox\" value=\"1\" class=\"{{css.dropDownItemCheckbox}}\" {{ctx.checked}} /> {{ctx.label}}</label></li>",
         actions: "<div class=\"{{css.actions}}\"></div>",
         body: "<tbody></tbody>",
@@ -410,7 +410,7 @@ Grid.defaults = {
         loading: "<tr><td colspan=\"{{ctx.columns}}\" class=\"loading\">{{lbl.loading}}</td></tr>",
         noResults: "<tr><td colspan=\"{{ctx.columns}}\" class=\"no-results\">{{lbl.noResults}}</td></tr>",
         pagination: "<ul class=\"{{css.pagination}}\"></ul>",
-        paginationItem: "<li class=\"{{ctx.css}}\"><a href=\"{{ctx.uri}}\" class=\"{{css.paginationButton}}\">{{ctx.text}}</a></li>",
+        paginationItem: "<li class=\"{{ctx.css}}\"><a data-page=\"{{ctx.page}}\" class=\"{{css.paginationButton}}\">{{ctx.text}}</a></li>",
         rawHeaderCell: "<th class=\"{{ctx.css}}\">{{ctx.content}}</th>", // Used for the multi select box
         row: "<tr{{ctx.attr}}>{{ctx.cells}}</tr>",
         search: "<div class=\"{{css.search}}\"><div class=\"input-group\"><span class=\"{{css.icon}} input-group-addon {{css.iconSearch}}\"></span> <input type=\"text\" class=\"{{css.searchField}}\" placeholder=\"{{lbl.search}}\" /></div></div>",