Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                  <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdn.rawgit.com/Dogfalo/materialize/fc44c862/dist/css/materialize.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script src="https://cdn.rawgit.com/Dogfalo/materialize/fc44c862/dist/js/materialize.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/pinzon1992/materialize_table_pagination/f9a8478f/js/pagination.js"></script>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta charset="UTF-8">
    <title>Paginación</title>
  </head>
  <body>
    <div class="row">
      <div class="col s12 m12 l6 offset-l2 center">
	<!--<input type="text" id="search" placeholder="Type to search..." />-->
        <table cellpadding="1" cellspacing="1" class="table table-hover" id="myTable">
          <thead>
            <tr>
              <th>nombre</th>
              <th>apellido</th>
              <th>edad</th>
              <th>mail</th>
            </tr>
          </thead>
          <tbody >
            <tr>
            	<td>Axel</td>
            	<td>Estes</td>
            	<td>33</td>
            	<td>gravida.sagittis.Duis@ultricesposuerecubilia.co.uk</td>
            </tr>
            <tr>
            	<td>Sean</td>
            	<td>Macias</td>
            	<td>63</td>
            	<td>ultrices.sit.amet@Cum.com</td>
            </tr>
            <tr>
            	<td>Keith</td>
            	<td>Merrill</td>
            	<td>11</td>
            	<td>Morbi.sit.amet@adipiscingligulaAenean.edu</td>
            </tr>
            <tr>
            	<td>Dean</td>
            	<td>Campos</td>
            	<td>50</td>
            	<td>Donec@libero.net</td>
            </tr>
            <tr>
            	<td>Prescott</td>
            	<td>Mayer</td>
            	<td>14</td>
            	<td>Duis.dignissim@turpis.net</td>
            </tr>
            <tr>
            	<td>Gil</td>
            	<td>Ayala</td>
            	<td>60</td>
            	<td>sem@enim.com</td>
            </tr>
            <tr>
            	<td>Orlando</td>
            	<td>Lara</td>
            	<td>44</td>
            	<td>mauris.sapien@risus.co.uk</td>
            </tr>
            <tr>
            	<td>Hop</td>
            	<td>Houston</td>
            	<td>80</td>
            	<td>aliquet.Phasellus.fermentum@sociosquad.com</td>
            </tr>
            <tr>
            	<td>Sylvester</td>
            	<td>Welch</td>
            	<td>23</td>
            	<td>sit.amet@liberoDonecconsectetuer.net</td>
            </tr>
            <tr>
            	<td>Benjamin</td>
            	<td>Goff</td>
            	<td>32</td>
            	<td>malesuada.ut@facilisis.com</td>
            </tr>
            <tr>
            	<td>Alfonso</td>
            	<td>Mack</td>
            	<td>80</td>
            	<td>in.lobortis@primisinfaucibus.co.uk</td>
            </tr>
            <tr>
            	<td>Deacon</td>
            	<td>Christian</td>
            	<td>47</td>
            	<td>ac.sem.ut@ornareIn.net</td>
            </tr>
            <tr>
            	<td>Brennan</td>
            	<td>Henson</td>
            	<td>48</td>
            	<td>mauris.Integer.sem@mollisnoncursus.org</td>
            </tr>
            <tr>
            	<td>Acton</td>
            	<td>Cooke</td>
            	<td>53</td>
            	<td>nisi.a.odio@ipsumcursus.net</td>
            </tr>
            <tr>
            	<td>Hiram</td>
            	<td>Drake</td>
            	<td>69</td>
            	<td>In.nec.orci@nibhPhasellus.edu</td>
            </tr>
            <tr>
            	<td>Kane</td>
            	<td>Patrick</td>
            	<td>61</td>
            	<td>cursus@sapienNuncpulvinar.net</td>
            </tr>
            <tr>
            	<td>Arden</td>
            	<td>Stephens</td>
            	<td>27</td>
            	<td>ridiculus.mus@velitAliquamnisl.co.uk</td>
            </tr>
            <tr>
            	<td>Amal</td>
            	<td>Velazquez</td>
            	<td>71</td>
            	<td>gravida.Aliquam@enim.edu</td>
            </tr>
            <tr>
            	<td>Thomas</td>
            	<td>Osborn</td>
            	<td>23</td>
            	<td>vel.quam.dignissim@ultricies.ca</td>
            </tr>
            <tr>
            	<td>Aladdin</td>
            	<td>Potter</td>
            	<td>77</td>
            	<td>vitae@mauris.co.uk</td>
            </tr>
            <tr>
            	<td>Oscar</td>
            	<td>Parrish</td>
            	<td>31</td>
            	<td>consectetuer@Nullatincidunt.net</td>
            </tr>
            <tr>
            	<td>Michael</td>
            	<td>Donaldson</td>
            	<td>63</td>
            	<td>at.pretium@nequeMorbi.ca</td>
            </tr>
            <tr>
            	<td>Emmanuel</td>
            	<td>Kirby</td>
            	<td>16</td>
            	<td>pharetra@Donec.ca</td>
            </tr>
            <tr>
            	<td>Bert</td>
            	<td>Gilmore</td>
            	<td>39</td>
            	<td>magna.Cras.convallis@ultricesposuerecubilia.ca</td>
            </tr>
            <tr>
            	<td>Sawyer</td>
            	<td>Flores</td>
            	<td>48</td>
            	<td>magna.tellus.faucibus@Lorem.com</td>
            </tr>
            <tr>
            	<td>Abel</td>
            	<td>Guerra</td>
            	<td>22</td>
            	<td>aliquam@cursusetmagna.org</td>
            </tr>
            <tr>
            	<td>Cameron</td>
            	<td>Haynes</td>
            	<td>18</td>
            	<td>nascetur@nisidictumaugue.com</td>
            </tr>
            <tr>
            	<td>Boris</td>
            	<td>Workman</td>
            	<td>20</td>
            	<td>dui@Vivamusmolestie.edu</td>
            </tr>
            <tr>
            	<td>Simon</td>
            	<td>Massey</td>
            	<td>77</td>
            	<td>tellus@arcuNunc.net</td>
            </tr>
            <tr>
            	<td>Fuller</td>
            	<td>Carver</td>
            	<td>30</td>
            	<td>vitae@nectellusNunc.org</td>
            </tr>
            <tr>
            	<td>Jeremy</td>
            	<td>Ferrell</td>
            	<td>42</td>
            	<td>a.mi@Aenean.co.uk</td>
            </tr>
            <tr>
            	<td>Neville</td>
            	<td>Leblanc</td>
            	<td>50</td>
            	<td>mauris@scelerisquesed.ca</td>
            </tr>
            <tr>
            	<td>John</td>
            	<td>Flynn</td>
            	<td>27</td>
            	<td>egestas@egetodio.com</td>
            </tr>
            <tr>
            	<td>Prescott</td>
            	<td>Meadows</td>
            	<td>61</td>
            	<td>bibendum@auctor.org</td>
            </tr>
            <tr>
            	<td>Clinton</td>
            	<td>Mckinney</td>
            	<td>55</td>
            	<td>Sed@euodio.net</td>
            </tr>
            <tr>
            	<td>Kevin</td>
            	<td>Nichols</td>
            	<td>38</td>
            	<td>semper.egestas.urna@pellentesquemassalobortis.co.uk</td>
            </tr>
            <tr>
            	<td>Solomon</td>
            	<td>Johns</td>
            	<td>18</td>
            	<td>a.dui.Cras@amet.com</td>
            </tr>
            <tr>
            	<td>Declan</td>
            	<td>Hardy</td>
            	<td>28</td>
            	<td>volutpat@necanteMaecenas.com</td>
            </tr>
            <tr>
            	<td>David</td>
            	<td>Richmond</td>
            	<td>19</td>
            	<td>justo@quisturpis.net</td>
            </tr>
            <tr>
            	<td>Keegan</td>
            	<td>Flowers</td>
            	<td>47</td>
            	<td>magna.a@vitaesodales.ca</td>
            </tr>
            <tr>
            	<td>Tanner</td>
            	<td>Kramer</td>
            	<td>10</td>
            	<td>eu.eleifend.nec@afacilisisnon.net</td>
            </tr>
            <tr>
            	<td>Troy</td>
            	<td>Kidd</td>
            	<td>17</td>
            	<td>leo.Morbi.neque@primisinfaucibus.co.uk</td>
            </tr>
            <tr>
            	<td>Dorian</td>
            	<td>Cardenas</td>
            	<td>53</td>
            	<td>Aliquam@tristique.com</td>
            </tr>
            <tr>
            	<td>Kaseem</td>
            	<td>Martinez</td>
            	<td>77</td>
            	<td>vulputate@vulputateullamcorpermagna.ca</td>
            </tr>
            <tr>
            	<td>Sylvester</td>
            	<td>Levine</td>
            	<td>29</td>
            	<td>rutrum@aliquetdiamSed.net</td>
            </tr>
            <tr>
            	<td>Lucius</td>
            	<td>Wiley</td>
            	<td>60</td>
            	<td>mi@non.net</td>
            </tr>
            <tr>
            	<td>Judah</td>
            	<td>Bright</td>
            	<td>46</td>
            	<td>commodo.tincidunt@arcuVestibulumante.ca</td>
            </tr>
            <tr>
            	<td>Daniel</td>
            	<td>Velazquez</td>
            	<td>22</td>
            	<td>lacus.Nulla@Utnecurna.ca</td>
            </tr>
            <tr>
            	<td>Galvin</td>
            	<td>Lang</td>
            	<td>46</td>
            	<td>Nulla.aliquet.Proin@Maecenas.com</td>
            </tr>
            <tr>
            	<td>Kasper</td>
            	<td>Byrd</td>
            	<td>74</td>
            	<td>tincidunt.nibh@utmi.ca</td>
            </tr>
            <tr>
            	<td>Stephen</td>
            	<td>Stein</td>
            	<td>72</td>
            	<td>quis.tristique.ac@amet.com</td>
            </tr>
            <tr>
            	<td>Raja</td>
            	<td>Donaldson</td>
            	<td>78</td>
            	<td>Fusce.diam.nunc@ornarelibero.net</td>
            </tr>
            <tr>
            	<td>Baxter</td>
            	<td>Munoz</td>
            	<td>22</td>
            	<td>non.justo.Proin@consectetueradipiscing.org</td>
            </tr>
            <tr>
            	<td>Holmes</td>
            	<td>Salinas</td>
            	<td>43</td>
            	<td>massa@in.org</td>
            </tr>
            <tr>
            	<td>Gregory</td>
            	<td>Harmon</td>
            	<td>61</td>
            	<td>eget.dictum@dolor.edu</td>
            </tr>
            <tr>
            	<td>Abbot</td>
            	<td>Skinner</td>
            	<td>70</td>
            	<td>mauris@nunc.org</td>
            </tr>
            <tr>
            	<td>Abdul</td>
            	<td>Norris</td>
            	<td>57</td>
            	<td>nisl.arcu.iaculis@Quisquepurus.org</td>
            </tr>
            <tr>
            	<td>Herrod</td>
            	<td>Compton</td>
            	<td>72</td>
            	<td>magnis.dis.parturient@eratVivamus.edu</td>
            </tr>
            <tr>
            	<td>Nigel</td>
            	<td>Crawford</td>
            	<td>70</td>
            	<td>arcu@lobortisquis.org</td>
            </tr>
            <tr>
            	<td>Amir</td>
            	<td>Norris</td>
            	<td>29</td>
            	<td>dictum.magna@lectusrutrumurna.org</td>
            </tr>
            <tr>
            	<td>Phelan</td>
            	<td>Eaton</td>
            	<td>60</td>
            	<td>Morbi.vehicula@Nulla.ca</td>
            </tr>
            <tr>
            	<td>Hilel</td>
            	<td>Leonard</td>
            	<td>54</td>
            	<td>iaculis.quis@tellus.com</td>
            </tr>
            <tr>
            	<td>Fletcher</td>
            	<td>Mcbride</td>
            	<td>51</td>
            	<td>vulputate@commodohendreritDonec.ca</td>
            </tr>
            <tr>
            	<td>Peter</td>
            	<td>Haley</td>
            	<td>80</td>
            	<td>volutpat.ornare.facilisis@Sed.co.uk</td>
            </tr>
            <tr>
            	<td>Dane</td>
            	<td>Pacheco</td>
            	<td>71</td>
            	<td>Curabitur.ut.odio@Fuscealiquamenim.org</td>
            </tr>
            <tr>
            	<td>Benjamin</td>
            	<td>Weaver</td>
            	<td>25</td>
            	<td>non@idrisusquis.edu</td>
            </tr>
            <tr>
            	<td>Allistair</td>
            	<td>Gardner</td>
            	<td>72</td>
            	<td>mauris@eteros.edu</td>
            </tr>
            <tr>
            	<td>Chandler</td>
            	<td>Acosta</td>
            	<td>29</td>
            	<td>sit@necmetusfacilisis.edu</td>
            </tr>
            <tr>
            	<td>Connor</td>
            	<td>Hubbard</td>
            	<td>32</td>
            	<td>Cum.sociis@nisisem.net</td>
            </tr>
            <tr>
            	<td>Richard</td>
            	<td>Palmer</td>
            	<td>21</td>
            	<td>Vivamus.rhoncus.Donec@tristiquepharetraQuisque.net</td>
            </tr>
            <tr>
            	<td>Leonard</td>
            	<td>Cox</td>
            	<td>80</td>
            	<td>ultrices@molestiearcuSed.ca</td>
            </tr>
            <tr>
            	<td>Gavin</td>
            	<td>Erickson</td>
            	<td>11</td>
            	<td>tempus.risus.Donec@neque.co.uk</td>
            </tr>
            <tr>
            	<td>Louis</td>
            	<td>Morse</td>
            	<td>67</td>
            	<td>eu.euismod@varius.edu</td>
            </tr>
            <tr>
            	<td>Uriel</td>
            	<td>Wright</td>
            	<td>30</td>
            	<td>amet.dapibus.id@nisl.net</td>
            </tr>
            <tr>
            	<td>Oscar</td>
            	<td>Walters</td>
            	<td>41</td>
            	<td>a@etmagnis.org</td>
            </tr>
            <tr>
            	<td>Stone</td>
            	<td>Stone</td>
            	<td>55</td>
            	<td>Nulla.facilisi.Sed@fringilla.org</td>
            </tr>
            <tr>
            	<td>Cody</td>
            	<td>Mayer</td>
            	<td>76</td>
            	<td>imperdiet.ornare.In@Suspendisse.org</td>
            </tr>
            <tr>
            	<td>Grant</td>
            	<td>English</td>
            	<td>18</td>
            	<td>ornare.placerat.orci@nisisem.co.uk</td>
            </tr>
            <tr>
            	<td>Jelani</td>
            	<td>Dennis</td>
            	<td>79</td>
            	<td>pede@tempus.net</td>
            </tr>
            <tr>
            	<td>Ishmael</td>
            	<td>Herman</td>
            	<td>70</td>
            	<td>tortor.dictum.eu@Innecorci.edu</td>
            </tr>
            <tr>
            	<td>Wallace</td>
            	<td>Nelson</td>
            	<td>12</td>
            	<td>urna@eudui.com</td>
            </tr>
            <tr>
            	<td>Kato</td>
            	<td>Gordon</td>
            	<td>34</td>
            	<td>est.Nunc.ullamcorper@semelitpharetra.net</td>
            </tr>
            <tr>
            	<td>Odysseus</td>
            	<td>Mcdaniel</td>
            	<td>67</td>
            	<td>risus.quis@pharetraNamac.com</td>
            </tr>
            <tr>
            	<td>Mark</td>
            	<td>Gill</td>
            	<td>66</td>
            	<td>orci.in.consequat@interdumenimnon.com</td>
            </tr>
            <tr>
            	<td>Chadwick</td>
            	<td>Wise</td>
            	<td>22</td>
            	<td>ullamcorper.nisl@velitAliquam.net</td>
            </tr>
            <tr>
            	<td>Armando</td>
            	<td>Curry</td>
            	<td>26</td>
            	<td>Ut@molestiearcu.org</td>
            </tr>
            <tr>
            	<td>Clayton</td>
            	<td>Cook</td>
            	<td>28</td>
            	<td>lorem.lorem.luctus@convallis.org</td>
            </tr>
            <tr>
            	<td>Fuller</td>
            	<td>Kim</td>
            	<td>57</td>
            	<td>elit.Nulla@velit.net</td>
            </tr>
            <tr>
            	<td>Slade</td>
            	<td>Cash</td>
            	<td>17</td>
            	<td>ornare.sagittis.felis@laciniaorciconsectetuer.edu</td>
            </tr>
            <tr>
            	<td>Octavius</td>
            	<td>Ortiz</td>
            	<td>52</td>
            	<td>sagittis.lobortis.mauris@Phasellusdapibusquam.co.uk</td>
            </tr>
            <tr>
            	<td>Evan</td>
            	<td>Tillman</td>
            	<td>52</td>
            	<td>Pellentesque.habitant.morbi@blanditmattisCras.co.uk</td>
            </tr>
            <tr>
            	<td>Lance</td>
            	<td>Crawford</td>
            	<td>26</td>
            	<td>orci.adipiscing.non@mi.co.uk</td>
            </tr>
            <tr>
            	<td>Caldwell</td>
            	<td>Keller</td>
            	<td>33</td>
            	<td>magna.Duis@est.org</td>
            </tr>
            <tr>
            	<td>Preston</td>
            	<td>Hamilton</td>
            	<td>23</td>
            	<td>mauris.rhoncus.id@porttitorvulputateposuere.org</td>
            </tr>
            <tr>
            	<td>Ulric</td>
            	<td>Elliott</td>
            	<td>43</td>
            	<td>Lorem.ipsum@Integerinmagna.net</td>
            </tr>
            <tr>
            	<td>Addison</td>
            	<td>Rhodes</td>
            	<td>12</td>
            	<td>pretium.aliquet.metus@ligulaconsectetuerrhoncus.org</td>
            </tr>
            <tr>
            	<td>Joshua</td>
            	<td>Obrien</td>
            	<td>69</td>
            	<td>varius.et@consequat.ca</td>
            </tr>
            <tr>
            	<td>Clark</td>
            	<td>Evans</td>
            	<td>37</td>
            	<td>Integer.in@odioauctorvitae.co.uk</td>
            </tr>
            <tr>
            	<td>Andrew</td>
            	<td>Mccullough</td>
            	<td>70</td>
            	<td>eu.nibh.vulputate@magna.co.uk</td>
            </tr>
            <tr>
            	<td>Nolan</td>
            	<td>Thompson</td>
            	<td>44</td>
            	<td>dolor.sit@quisurnaNunc.net</td>
            </tr>
            </tbody>
          </table>
          <div class="col-md-12 center text-center">
	    <span class="left" id="total_reg"></span>
            <ul class="pagination pager" id="myPager"></ul>
          </div>
      </div>
      <div class="col s12 m2 l2">
        More info in <a href="https://github.com/pinzon1992/materialize_table_pagination">GITHUB</a>
      </div>
    </div>
  </body>
              
            
!

CSS

              
                
              
            
!

JS

              
                $(document).ready(function(){
  $('#myTable').pageMe({
    pagerSelector:'#myPager',
    activeColor: 'blue',
    prevText:'Anterior',
    nextText:'Siguiente',
    showPrevNext:true,
    hidePageNumbers:false,
    perPage:10
  });
});
              
            
!
999px

Console