DataTable Column Filter
<pre><code>function getalluserrollforviewtracker() {
    $.ajax({
        type: 'POST',
        url: '/mobitelprogress/Auserrole',
        contentType: 'application/json',
        success: function (data, textStatus, jqXHR) {
            console.log(data);
            displayalltrackernames(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            $('#managerselectuserrole').html("&lt;tr&gt;&lt;td colspan='5'class='text-center' style='color:red'&gt;System Error.&lt;/td&gt;&lt;/tr&gt;");
        }
    });
}

function displayalltrackernames(data) {
    var rowData = "";
    if (data.length === 0) {
        $('#managerselectuserrole')
                .html("&lt;tr&gt;&lt;td colspan='5'class='text-center' style='color:red'&gt;no any User Role done yet &lt;/td&gt;&lt;/tr&gt;");
    } else {
        $.each(data, function (x, tDataJson) {
            rowData += "&lt;tr&gt;"
                    + "&lt;td&gt;" + (x + 1) + "&lt;/td&gt;"
                    + "&lt;td&gt;" + tDataJson.userRole + "&lt;/td&gt;"
                    + "&lt;td&gt;&lt;i class='ion-checkmark-circled'&gt;&lt;/i&gt;&lt;/td&gt;"
                    + "&lt;td align='center'&gt;&lt;input type='button' class='btn btn-xs btn-info '  value='info' onclick='loadtrackerpage(" + JSON.stringify(tDataJson.userRole) + ");' /&gt;&lt;/td&gt;"
                    + "&lt;/tr&gt;";
        });
        $('#managerselectuserrole').html(rowData);
    }
}
</code></pre>

<p>I create ajax call for get <code>json</code> data in my databases. Then I displat data using above javascript method. My table body's id is <code>id=managerselectuserrole</code> like that. So I can set data into my table. But my total data rows are about 100. Therefore I want to use <code>DataTable Column Filter</code> method. How I apply above method for my above code.</p>