CODEWITHSUNDEEP
ajaxdatatable
charu joshi
charu joshi

Reputation: 113

data table search is not working on ajax call data

I have a jsp clientprice.jsp in which there is a datatable in which data is loaded on select box dynamically by ajax call. Data is shown in datatable but search is not working. I included my jsp as well ajax code here -

function getTestsByClient(clientId,tableId) {
$.ajax({
    url : "/corelims/rest/data/get/tests/by/client/" + clientId,
    type : 'GET',
    dataType : "json",
    complete : function(data, textStatus, $XHR) {
        afterAjaxCall($XHR,textStatus);
        arrayData = JSON.parse(data.responseText);
        htmltd = "";
        var i=0;

        var carr = ["class1","class2","class3","class4","class5","class6"];

        for (var i = 0; i < arrayData.length; i++) {

            jsonObj = arrayData[i];
            htmltd+="<tr id='tr"+i+"' class='' >";

        var j = 0;
        var v = "tr"+i;
        var func = "activateTestPriceChangeClass('"+v+"')";
        for ( var key in jsonObj) {
            if(j<3){
                htmltd += "<td  id=td"+(i)+" class='core-td'><input type='text' class='core-input "+carr[j-1]+"' id="+key+(i)+" name="+key+(i)+" value="+jsonObj[key]+" onchange="+func+" readonly='readonly'></td>";
            }
            else{
                htmltd += "<td  id=td"+(i)+" class='core-td'><input type='text' class='core-input "+carr[j-1]+"' id="+key+(i)+" name="+key+(i)+" value="+jsonObj[key]+" onchange="+func+" ></td>";
            }
            j++;
        }
        i+1;
        htmltd+='</tr>'
        }
        $("#"+tableId).html(htmltd);
    }
});
 }

html code -

 <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered datatables" id="client_price">
                            <thead>
                                <tr>
                                    <th>Test Code</th>
                                    <th>Test Name</th>
                                    <th>CORE MRP</th>
                                    <th>Top Level Discount</th>
                                    <th>MRP Discount</th>
                                    <th>Net Amount</th>
                                </tr>
                            </thead>
                            <tbody id ="testBody">
                                <tr class="odd gradeX">
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody> 
                        </table>

Upvotes: 2

Views: 1088

Answers (1)

Aaska Patel
Aaska Patel

Reputation: 468

function getTestsByClient(clientId,tableId) {
$.ajax({
    url : "/corelims/rest/data/get/tests/by/client/" + clientId,
    type : 'GET',
    dataType : "json",
    complete : function(data, textStatus, $XHR) {
    afterAjaxCall($XHR,textStatus);
    arrayData = JSON.parse(data.responseText);
    htmltd = "";
    var i=0;

    var carr = ["class1","class2","class3","class4","class5","class6"];
    htmltd+='<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered datatables" id="'+tableId+'">
                        <thead>
                            <tr>
                                <th>Test Code</th>
                                <th>Test Name</th>
                                <th>CORE MRP</th>
                                <th>Top Level Discount</th>
                                <th>MRP Discount</th>
                                <th>Net Amount</th>
                            </tr>
                        </thead>
                        <tbody id ="testBody">';
    for (var i = 0; i < arrayData.length; i++) {

        jsonObj = arrayData[i];
        htmltd+="<tr id='tr"+i+"' class='' >";

        var j = 0;
        var v = "tr"+i;
        var func = "activateTestPriceChangeClass('"+v+"')";
        for ( var key in jsonObj) {
            if(j<3){
                htmltd += "<td  id=td"+(i)+" class='core-td'><input type='text' class='core-input "+carr[j-1]+"' id="+key+(i)+" name="+key+(i)+" value="+jsonObj[key]+" onchange="+func+" readonly='readonly'></td>";
            }
            else{
               htmltd += "<td  id=td"+(i)+" class='core-td'><input type='text' class='core-input "+carr[j-1]+"' id="+key+(i)+" name="+key+(i)+" value="+jsonObj[key]+" onchange="+func+" ></td>";
           }
           j++;
       }
       i+1;
       htmltd+='</tr>'
    }
     htmltd+='</tbody> </table>'
    $("#divtable").html(htmltd);
    $("#"+tableId).DataTable();
   }
 });
 }

html Code :

     '<div id="divtable">
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered datatables" id="client_price">
                        <thead>
                            <tr>
                                <th>Test Code</th>
                                <th>Test Name</th>
                                <th>CORE MRP</th>
                                <th>Top Level Discount</th>
                                <th>MRP Discount</th>
                                <th>Net Amount</th>
                            </tr>
                        </thead>
                        <tbody id ="testBody">
                            <tr class="odd gradeX">
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody> 
                    </table>
        </div>'

Upvotes: 1

Related Questions