DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td><input type="text" id="row-1-age" name="row-1-age" value="61"></td>
                <td><input type="text" id="row-1-position" name="row-1-position" value="System Architect"></td>
                <td><select size="1" id="row-1-office" name="row-1-office">
                    <option value="Edinburgh" selected="selected">
                        Edinburgh
                    </option>
 
                    <option value="London">
                        London
                    </option>
 
                    <option value="New York">
                        New York
                    </option>
 
                    <option value="San Francisco">
                        San Francisco
                    </option>
 
                    <option value="Tokyo">
                        Tokyo
                    </option>
                </select></td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td><input type="text" id="row-2-age" name="row-2-age" value="63"></td>
                <td><input type="text" id="row-2-position" name="row-2-position" value="Accountant"></td>
                <td><select size="1" id="row-2-office" name="row-2-office">
                    <option value="Edinburgh">
                        Edinburgh
 ...

JavaScript

var count = 0;

$.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
    console.log(count);
    return $(value).val();
};

var table = $("#example").DataTable({
    columnDefs: [
       { "type": "html-input", "targets": [1, 2, 3] }
    ] 
});

$("#example td input").on('change', function() {
    count++;
    //does not work
    //var td = $(this).parent();
    //table.cell(td).invalidate().draw();
    
    //doesnt work either
    table.rows().invalidate(); //auto, data or dom does not make any difference
});