DataTables

DataTables Examples

by markps

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
   
    <title>Example 1 - apply dataTable()</title>
    <a href='javascript:;' id='delete'>delete row 2</a>
    <br><br>
           
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" 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>
            <td>Trident</td>
            <td>Internet
                 Explorer 4.0</td>
            <td>Win 95+</td>
            <td> 4</td>
            <td>X</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.0</td>
            <td>Win 95+</td>
            <td>5</td>
            <td>C</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.5</td>
            <td>Win 95+</td>
            <td>5.5</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 6</td>
            <td>Win 98+</td>
            <td>6</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td>7</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>AOL browser (AOL desktop)</td>
            <td>Win XP</td>
            <td>6</td>
            <td>A</td>
        </tr>
        <tr>
           ...

JavaScript

$(document).ready(function() {
    var oTable = $('#example').dataTable(
    {
    	"bSort" : false
    });
    
    $('#delete').click(function(e){
			var row = oTable.find('tr').eq(3);
    	oTable.fnDeleteRow( row[0] );
    })
});