Better support for modification of HTML of existing lists

docs/api.html

@@ -39,6 +39,7 @@ <h4>Properties</h4>
 <h4>Methods</h4>
 <ul class="api-index">
   <li><a href="#add">add</a></li>
+  <li><a href="#addItem">addItem</a></li>
   <li><a href="#clear">clear</a></li>
   <li><a href="#filter">filter</a></li>
   <li><a href="#fuzzysearch">fuzzySearch</a></li>
@@ -218,6 +219,10 @@ <h3><a name="methods" class="anchor" href="#methods"></a>Methods</h3>
 console.log('All ' + items.length + ' were added!');
 });</code></pre>
   </li>
+  <li>
+    <p><strong><a name="addItem" class="achor" href="#add"></a>addItem(element)</strong><br>
+    Adds an item to the list based on the supplied DOM element.</p>
+  </li>
   <li>
     <p><strong><a name="remove" class="achor" href="#remove"></a>remove(valueName, value)</strong><br>
     Removes items from the list where the value named <code>valueName</code> has value <code>value</code>.
@@ -253,6 +258,7 @@ <h3><a name="methods" class="anchor" href="#methods"></a>Methods</h3>
     <a href="https://github.com/nwoltman/string-natural-compare">https://github.com/nwoltman/string-natural-compare</a>,
     if you want to use your own, <a href="https://github.com/javve/list.js/blob/master/src/sort.js">read the code</a> and
     <a href="https://github.com/javve/list.js/blob/master/test/test.sort.js">check out the tests</a>.</p>
+    <p>If called with no arguments, the previous sort will be re-applied.  This is useful if the list has been modified.</p>
 
 <pre><code class="javascript">listObj.sort('name', { order: "asc" }); // Sorts the list in abc-order based on names
 listObj.sort('name', { order: "desc" }); // Sorts the list in zxy-order based on names
@@ -265,6 +271,9 @@ <h3><a name="methods" class="anchor" href="#methods"></a>Methods</h3>
 
 // Alphabet could also be on the actual listObj via
 listObj.alphabet = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvXxYyZzÅåÄäÖö";
+
+// Re-apply the last sort
+listObj.sort();
 </code></pre>
 
   </li>
@@ -335,10 +344,19 @@ <h3><a name="methods" class="anchor" href="#methods"></a>Methods</h3>
     hides some items with the <code>itemObj.hide()</code> method then you have to call <code>listObj.update()</code>
     if you want the paging to update.</p>
   </li>
+  <li>
+    <p><strong><a name="refresh" class="achor" href="#refresh"></a>refresh()</strong><br>
+    Reload all existing rows from current HTML.  This is useful if the content
+    of rows has been modified and will enable <a href="#search">search</a> and <a
+    href="#sort">sort</a> to operate on the updated data.  Unlike <a
+    href="#reindex">reIndex</a>, rows will not be added or removed.  To add new HTML elements to a list, use <a href="#addItem">addItem</a>.
+    </p>
+  </li>
   <li>
     <p><strong><a name="reindex" class="achor" href="#reindex"></a>reIndex()</strong><br>
     Re-index list from HTML. Good to use if the HTML has been changed by something
-    else than List.js.</p>
+    else than List.js.  Note that this will remove any removes that are not
+    currently visible due to pagination or filtering.</p>
   </li>
   <li>
     <p><strong><a name="fuzzySearch" class="achor" href="#fuzzySearch"></a>fuzzySearch()</strong><br>

src/index.js

@@ -102,6 +102,12 @@ module.exports = function(id, options, values) {
     self.parse(self.list);
   };
 
+  this.refresh = function() {
+    for (var i = 0; i < self.items.length; i++ ) {
+      self.items[i].reload();
+    }
+  };
+
   this.toJSON = function() {
     var json = [];
     for (var i = 0, il = self.items.length; i < il; i++) {
@@ -138,6 +144,14 @@ module.exports = function(id, options, values) {
     return added;
   };
 
+  this.addElement = function(elm) {
+      var item = null;
+      notCreate = (self.items.length > self.page) ? true : false;
+      item = new Item(this.valueNames, elm, notCreate);
+      self.items.push(item);
+      self.update();
+  };
+
 	this.show = function(i, page) {
 		this.i = i;
 		this.page = page;

src/item.js

@@ -21,6 +21,11 @@ module.exports = function(list) {
       }
     };
 
+    this.reload = function() {
+        var values = list.templater.get(item, initValues);
+        item.values(values);
+    };
+
     this.values = function(newValues, notCreate) {
       if (newValues !== undefined) {
         for(var name in newValues) {

src/sort.js

@@ -46,10 +46,22 @@ module.exports = function(list) {
     }
   };
 
+  var sortFunction;
+
   var sort = function() {
     list.trigger('sortStart');
     var options = {};
 
+    /* Re-run the existing sort, if there is one */
+    if (arguments.length == 0) {
+      if (sortFunction !== undefined) {
+        list.items.sort(sortFunction);
+        list.update();
+      }
+      list.trigger('sortComplete');
+      return;
+    } 
+
     var target = arguments[0].currentTarget || arguments[0].srcElement || undefined;
 
     if (target) {
@@ -70,8 +82,7 @@ module.exports = function(list) {
     // caseInsensitive
     // alphabet
     var customSortFunction = (options.sortFunction || list.sortFunction || null),
-        multi = ((options.order === 'desc') ? -1 : 1),
-        sortFunction;
+        multi = ((options.order === 'desc') ? -1 : 1);
 
     if (customSortFunction) {
       sortFunction = function(itemA, itemB) {