Wednesday, 2 September 2015

Create dynamic table and fill with value in jquery

function GetDetails() {
    var url = serverPath + "PageName/MethodName";
    $.post(url, function (data, textStatus, XMLHttpRequest) {

        var content = "";
        if (data.length > 0) {
         
            content += '<table border="1" width="100%" class="" id="OpenCallDetails">';
            content += '<tr class="GridHeading" id="rowHeader">';
            content += '<th>ID</th>';
            content += '<th>PCC</th>';
            content += '<th>Assigned To</th>';
       
            content += '<th>Created On</th>';
       
            content += '<th></th>';

            content += '</tr>';

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

                if (data[i].PendingDays < 5) {
                    content += "<tr id='" + i + "' style='background-color: white;color: black;'>";
                }
                else if (data[i].PendingDays < 10) {
                    content += "<tr id='" + i + "' style='background-color: yellow;color: black;'>";
                }
                else if (data[i].PendingDays < 15) {
                    content += "<tr id='" + i + "' style='background-color: orange;color: black;'>";
                }
                else if (data[i].PendingDays < 20) {
                    content += "<tr id='" + i + "' style='background-color:blue;color: white;'>";
                }
                else if (data[i].PendingDays > 20) {
                    content += "<tr  id='" + i + "' style='background-color:red;color: white;'>";
                }
                content += '<td align="center">';
                content += data[i].ID;
                content += '</td>';
                content += '<td align="center">';
                content += data[i].PCC;
                content += '</td>';
                content += '<td align="center">';
                content += data[i].AssignedTo;
                content += '</td>';

                content += '<td align="center">';
                content += data[i].CreatedOn;
                content += '</td>';
         
                content += '</tr>';
            }
            content += '</table>';

            $("#This is div ID").append(content);
        }
    }, "json");
}

No comments:

Post a Comment