Geek asks and answers

How to set up page content for Twitter

I am working on changing a web application so that the client uses Twitter Bootstrap instead of YUI and asks a question related to splitting into Bootstrap Pagination. I looked at the pagination documentation:

http://cssdeck.com/item/271/twitter-bootstrap-pagination-and-pager

but it only shows how to create the page title, and not how to adjust the actual page content for individual pages. Does anyone have a link to a more complete pagination example using Twitter Bootstrap?

I really hoped for a jquery plugin that would allow me to load all content pages in a div, and then automatically create a page title for the number of pages found. Bootstrap pagination doesn't do this? If not, does anyone know of a Bootstrap-based plugin that does this?

+5
source share
1 answer

I think you should try JQuery DataTables http://datatables.net/blog/Twitter_Bootstrap .

Live Demo: http://datatables.net/media/blog/bootstrap/

Updated Answer

Jquery Datatable - Bootstrap 3 (paginated)

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>DataTables Bootstrap 3 example</title>

    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="dataTables.bootstrap.css">

    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10-dev/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="dataTables.bootstrap.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#example').dataTable();

        } );
    </script>
</head>


<body>
<div class="container">

 <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
<thead>
    <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
    </tr>
</thead>
<tbody>
    <tr class="odd gradeX">
        <td>Trident</td>
        <td>Internet
             Explorer 4.0</td>
        <td>Win 95+</td>
        <td class="center"> 4</td>
        <td class="center">X</td>
    </tr>
    <tr class="even gradeC">
        <td>Trident</td>
        <td>Internet
             Explorer 5.0</td>
        <td>Win 95+</td>
        <td class="center">5</td>
        <td class="center">C</td>
    </tr>
    <tr class="odd gradeA">
        <td>Trident</td>
        <td>Internet
             Explorer 5.5</td>
        <td>Win 95+</td>
        <td class="center">5.5</td>
        <td class="center">A</td>
    </tr>
    <tr class="even gradeA">
        <td>Trident</td>
        <td>Internet
             Explorer 6</td>
        <td>Win 98+</td>
        <td class="center">6</td>
        <td class="center">A</td>
    </tr>
    <tr class="odd gradeA">
        <td>Trident</td>
        <td>Internet Explorer 7</td>
        <td>Win XP SP2+</td>
        <td class="center">7</td>
        <td class="center">A</td>
    </tr>
    <tr class="even gradeA">
        <td>Trident</td>
        <td>AOL browser (AOL desktop)</td>
        <td>Win XP</td>
        <td class="center">6</td>
        <td class="center">A</td>
    </tr>

  </tbody>
  </table>

 </div>

 </body>
 </html>

You can download the files here: https://copy.com/ViElPNKAUNCR

+3
source

More articles:


All Articles