Dynamically adding rows to datatable using ajax with pagination and sorting

If you are modifying the table html using jQuery but not the apis provided by plugin then you have to call the plugin again so that it will reinstantiate as per the modified html.

$(document).ready(function() {
    $('#tblItems').append('<tbody><tr><td>asdsa34id</td><td> asdsa34id </td><td>asdsa34id </td><td> asdsa34id</td><td>asdsa34id</td><td>asdsa34id</td><td>asdsa34id</td></tr></tbody>');

    $('#tblItems').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "sDom": 'lfrtip'
    });

});

Demo https://jsfiddle.net/8hyr08xb/

Update based on the edited question

Try this

function PopulateItemsTable() {
    var txt = "";
    $.ajax({
        type: "POST",
        url: "Item.aspx/Search",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var jsonObject = JSON.parse(response.d), html = [];
            if (jsonObject) {
                var len = jsonObject.length;
                if (len > 0) {
                    for (var i = 0; i < len; i++) {
                        if (jsonObject[i].Id) {
                            Id = jsonObject[i].Id;
                        }
                        else {
                            Id = '';
                        }
                        if (jsonObject[i].Name) {
                            Name = jsonObject[i].Name;
                        }
                        else {
                            Name = '';
                        }
                        if (jsonObject[i].Description) {
                            Description = jsonObject[i].Description;
                        }
                        else {
                            Description = '';
                        }
                        if (jsonObject[i].Image) {
                            Image = jsonObject[i].Image;
                        }
                        else {
                            Image = '';
                        }
                        if (jsonObject[i].Parent) {
                            Parent = jsonObject[i].Parent;
                        }
                        else {
                            Parent = '';
                        }
                        if (jsonObject[i].Location) {
                            Location = jsonObject[i].Location;
                        }
                        else {
                            Location = '';
                        }
                        Category = '';

                        html.push("<tr><td>" + Id + "</td><td>" + Name + "</td><td>" + Description + "</td><td>" + Image + "</td><td>" + Parent + "</td><td>" + Location + "</td><td>" + Category + "</td></tr>");
                    }

                    $('#tblItems')
                       .append('<tbody>' + html.join('') + '</tbody>')
                       .DataTable({
                          "paging": true,
                          "lengthChange": false,
                          "searching": false,
                          "ordering": true,
                          "info": true,
                          "autoWidth": false,
                          "sDom": 'lfrtip'
                   });
                }
                else {
                    $("#tblItems").append("No records found");
                }

            }
        },
        failure: function () {
            $("#tblItems").append(" Error when fetching data please contact administrator");
        }
    });
}

Do not add the row to the table markup directly, instead add it to DataTable instance and then use the .draw() method. Adding to the DataTable instance will internally add it as a tbody anyway. Something like this should do

var mytable = $('#tblItems').DataTable({
    "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "sDom": 'lfrtip'
});
mytable.row.add(['asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id']);
mytable.draw();

Here is a demo https://jsfiddle.net/dhirajbodicherla/vwpsxhaL/1/

Also reading how to add rows to DataTable from their documentation for further reference

---

Update

You can use rows.add() (plural) and do something like this

var jsonObject = JSON.parse(response.d);
var result = jsonObject.map(function(item){
  var result = [];
  result.push(item.Id); 
  // .... add all the values required
  return result;
});
myTable.rows.add(result); // add to DataTable instance
myTable.draw(); // always redraw

---

var myTable;
$(document).ready(function() {
  myTable = $("#tblItems").DataTable({
    "deferRender": true,
    "paging": true,
    "lengthChange": false,
    "searching": false,
    "ordering": true,
    "info": true,
    "autoWidth": false,
    "sDom": 'lfrtip'
  });
  PopulateItemsTable();
});

function PopulateItemsTable() {
  $.ajax({
    type: "POST",
    url: "Item.aspx/Search",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
      var jsonObject = JSON.parse(response.d);
      var result = jsonObject.map(function(item){
        var result = [];
        result.push(item.Id); 
        // .... add all the values required
        return result;
      });
      myTable.rows.add(result); // add to DataTable instance
      myTable.draw(); // always redraw
    }
  });
}