Datatable

Datatable is a jQuery plugin for dynamic datatables with pagination, filtering and ajax loading.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" media="screen" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/datatable-bootstrap.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascripts/datatable.min.js"></script>

2. HTML

<div class="paging"></div>
<table>
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Linus</td>
            <td>Torvalds</td>
            <td>Computer Science</td>
        </tr>
        <tr>
            <td>Brian</td>
            <td>Kernighan</td>
            <td>Computer Science</td>
        </tr>
        <tr>
            <td>Blaise</td>
            <td>Pascal</td>
            <td>Mathematics</td>
        </tr>
        <tr>
            <td>Larry</td>
            <td>Page</td>
            <td>Computer Science</td>
        </tr>
        <tr>
            <td>Richard</td>
            <td>Hamming</td>
            <td>Mathematics</td>
        </tr>
        <tr>
            <td>Grace</td>
            <td>Hopper</td>
            <td>Computer Science</td>
        </tr>
        <tr>
            <td>Pierre</td>
            <td>Bezier</td>
            <td>Mathematics</td>
        </tr>
        <tr>
            <td>Shigeru</td>
            <td>Miyamoto</td>
            <td>Computer Science</td>
        </tr>
        <tr>
            <td>Leslie</td>
            <td>Lamport</td>
            <td>Computer Science</td>
        </tr>
        <tr>
            <td>Rasmus</td>
            <td>Lerdorf</td>
            <td>Computer Science</td>
        </tr>
    </tbody>
</table>
<div class="paging"></div>

3. JAVASCRIPT

$('#example-table').datatable({
    pageSize: 5,
    sort: [true, true, false],
    filters: [true, false, 'select'],
    filterText: 'Type to filter... '
}) ;

4. OPTIONS

The current available options that can be passed to datatable are shown in the following table:

5. COMMANDS

Some commands are available with datatable plugin, you can call a command like this way:

$('#MyTable').datatable(command, args) ;

Available commands are:

Some options required an ID, how element are compared is specified by identify option. Ifidentify is a string, then element are compared using this key. If identify is a function, 2 elements are equals if identify returns true. Examples:

/* EXAMPLE 1 */
 
/* Two elements E1 and E2 are equals if E1.id === E2.id. */
$('#MyTable').datatable({identify: 'id'}) ;
/* Delete the first element E found such as E.id === 4. */
$('#MyTable').datatable('delete', 4) ;
 
/* EXAMPLE 2 */
 
$('#MyTable').datatable({identify: function (id, E) { return id.toUpperCase() === (E.firstname.toUpperCase() + ' ' + E.lastname.toUpperCase() ; }}) ;
/* Update ISAAC NEWTON. The update function will update all the field contains in the second parameter. */
$('#MyTable').datatable('update', 'ISAAC NEWTON', {field: "Mathematics"}) ;