Simple updated dynamic datatable using Bootstrap (NEW) | 2my4edge

29 January 2015

Simple updated dynamic datatable using Bootstrap (NEW)

Dynamic data table using bootstrap, here in this dynamic data table is created with help of Bootstrap, here in the dynamic data table is used as data table to get data from database and here it has search, counting for number of fields in table and pagination, data sorting like that kind of all features are there in this data table. i have already post one post about this data table , but this one is updated and simple one.

DOWNLOAD                  LIVE DEMO

Here we have to add some bootstrap jquery files for this. 

CSS & JQUERY
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>

SCRIPT TO MAKE ENABLE DATA TABLE
<script type="text/javascript" class="init">
  $(document).ready(function() {
    $('#example-table').dataTable();
  } );          
</script>

HTML CODE
<div class="container">
  <div class="container-fluid">
    <div class="col-md-10 col-md-offset-1">
      <table id="example-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>S. No</th>
            <th>Tutorial Name</th>
            <th>Demo link</th>
            <th>Download link</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td><a href="http://www.2my4edge.com/2013/04/better-and-flexible-tooltip-using.html">Facebook style tooltip</a></td>
            <td align="center"><a href="http://demos.2my4edge.com/2my4edge-tooltip/">DEMO</a></td>
            <td align="center"><a href="https://www.box.com/s/g7t4dsm41qzzswrdq2wz"> DOWNLOAD </a></td>
          </tr>
          <tr>
            <td>2</td>
            <td><a href="http://www.2my4edge.com/2013/05/floating-menu-using-jquery-plugin.html">Floating menu using Jquery</a></td>
            <td align="center"><a href="http://demos.2my4edge.com/sticky-floating-menu/">DEMO</a></td>
            <td align="center"><a href="https://www.box.com/s/jzxhqsd6s1v0vymbinwm"> DOWNLOAD </a></td>
          </tr>
          <tr>
            <td>3</td>
            <td><a href="http://www.2my4edge.com/2013/05/create-facebook-app-and-invite-or-bring.html">Bring ur facebook friends to your website</a></td>
            <td align="center"><a href="http://www.2my4edge.com/2013/05/create-facebook-app-and-invite-or-bring.html">DEMO</a></td>
            <td align="center"><a href="https://www.box.com/s/nfu0bg4bu7fcv0zr6e99"> DOWNLOAD </a></td>
          </tr>
          <tr>
            <td>4</td>
            <td><a href="http://www.2my4edge.com/2013/05/make-bookmark-favorites-page-using-java.html">Make bookmark of your page</a></td>
            <td align="center"><a href="http://www.2my4edge.com/2013/05/make-bookmark-favorites-page-using-java.html">DEMO</a></td>
            <td align="center"><a href="https://www.box.com/s/nfu0bg4bu7fcv0zr6e99"> DOWNLOAD </a></td>
          </tr>
          <tr>
            <td>5</td>
            <td><a href="http://www.2my4edge.com/2013/05/create-database-with-mysql-and-insert.html">Basic of php and mysql ( insert coding )</a></td>
            <td align="center"><a href="http://demos.2my4edge.com/iedu/">DEMO</a></td>
            <td align="center"><a href="https://www.box.com/s/tpdit41ff1m1x0iddytb"> DOWNLOAD </a></td>
          </tr>
          <tr>
            <td>6</td>
            <td><a href="http://www.2my4edge.com/2013/05/detect-operating-system-and-detect.html">Detect operating system and browser using Php</a></td>
            <td align="center"><a href="http://demos.2my4edge.com/detect-os/">DEMO</a></td>
            <td align="center"><a href="https://www.box.com/s/e87o5ei0g5nyzgytr04m"> DOWNLOAD </a></td>
          </tr>
          <tr>
            <td>7</td>
            <td><a href="http://www.2my4edge.com/2013/05/simple-concept-for-select-all-text.html">Select all text in textarea</a></td>
            <td align="center"><a href="http://demos.2my4edge.com/onclick-select/">DEMO</a></td>
            <td align="center"><a href="http://www.2my4edge.com/2013/05/simple-concept-for-select-all-text.html"> DOWNLOAD </a></td>
          </tr>
          <tr>
            <td>8</td>
            <td><a href="http://www.2my4edge.com/2013/05/toggle-showhide-concept-using-java.html">Toggle hide and show concept</a></td>
            <td align="center"><a href="http://demos.2my4edge.com/toggle-hide-show/">DEMO</a></td>
            <td align="center"><a href="https://www.box.com/s/bkqvp1ldv1q1g9ufe3ij"> DOWNLOAD </a></td>
          </tr>
          <tr>
            <td>9</td>
            <td><a href="http://www.2my4edge.com/2013/05/comment-system-using-php-and-mysql.html">Comment system using php and MYSQL</a></td>
            <td align="center"><a href="http://demos.2my4edge.com/comment-system-demo/">DEMO</a></td>
            <td align="center"><a href="https://www.box.com/s/cdt4rfcgfhu0dqylddbw"> DOWNLOAD </a></td>
          </tr>
          <tr>
            <td>10</td>
            <td><a href="http://www.2my4edge.com/2013/05/how-to-create-animated-gif-loading.html">Create .gif animated image in photoshop</a></td>
            <td align="center"><a href="http://www.2my4edge.com/2013/05/how-to-create-animated-gif-loading.html">DEMO</a></td>
            <td align="center"><a href="http://www.2my4edge.com/2013/05/how-to-create-animated-gif-loading.html"> DOWNLOAD </a></td>
          </tr>
          <tr>
            <td>11</td>
            <td><a href="http://www.2my4edge.com/2013/06/change-colored-image-into-black-and.html">Chage color to black and white image usinf css</a></td>
            <td align="center"><a href="http://demos.2my4edge.com/image-hover-black-and-white/">DEMO</a></td>
            <td align="center"><a href="https://www.box.com/s/ci9k58nrchmpovev3vu5"> DOWNLOAD </a></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

This is code is really helpful to you, but while using server side try to avoid this code, because it will load all the data from database for first use itself. so if more data is there loading time will be slow and this one is simpler than last data table post. Thank you. keep visiting.




RELATED POSTS : 

4 comments:

  1. I couldn't download it! plz help me

    ReplyDelete
  2. Download process is happened something wrong! Plz check and fix it. Thanks

    ReplyDelete
  3. no css and js files inside folder when i download it. just only index file

    ReplyDelete

^