title: How to use "next" and "previous" button instead of numbers in list.js pagination?
body: <p>I have a table with many rows. Therefore I decided to use <code>list.js</code> (pagination). However I don't want numbers as pages but a <code>next</code> and <code>previous</code> button which I can style individually (or let bootstrap to the job).</p>
  
  <pre><code>&lt;ul class="pager"&gt;
       &lt;li&gt;
            &lt;a class="" href="#"&gt;Previous&lt;/a&gt;
       &lt;/li&gt;
       &lt;li&gt;
            &lt;a class="" href="#"&gt;Next&lt;/a&gt;
       &lt;/li&gt;
  &lt;/ul&gt;
  
  var list = new List('item-table', {
      valueNames: ['item'],
      page: 10,
      plugins: [ListPagination({})]
  });
  </code></pre>
  
  <p>Is this possible with the library (I haven't found anything useful in the documentation) or do I have to use something else?</p>
  
  <p>I tried the solution from roll. I get an error now saying <code>Cannot read property 'childNodes' of undefined</code>. This error disappers when I add <code>&lt;ul class="pagination"&gt;&lt;/ul&gt;</code>. However when trying to access the show method of the list I get an error again: <code>Cannot read property 'show' of undefined</code></p>
  
  <p>New JS-code</p>
  
  <pre><code>$(document).ready(function() {
          //var options = {
          //    valueNames: ['einheit'],
          //    page: 13,
          //    plugins: [ListPagination({})]
          //}
  
          var list = new List('item-table', {
              valueNames: ['item'],
              page: 10,
              plugins: [ListPagination({})]
          });
  
          var i = 1;
  
          $('.next').on('click', function () {
              console.log("next");
              i++;
              list.show(i, 10);
          });
  
          $('.prev').on('click', function () {
              console.log("prev");
              i--;
              list.show(i, 10);
          });
      });
  </code></pre>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;div id="item-table"&gt;
                  &lt;table class="table"&gt;
                      &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody class="list"&gt;
                          &lt;tr class="item"&gt;
                          &lt;/tr&gt;
                      &lt;!-- loads of items here --&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
                  &lt;ul class="pager"&gt;
                      &lt;li class="next"&gt;
                          &lt;a href="#"&gt;Next&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="prev"&gt;
                          &lt;a href="#"&gt;Previous&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>