Render in Jquery DataTable

Ramco Ramco

5y3.2k.NET

How the below 2 lines works. Secondly how to call function on click of Edit

{

"render": function (data, type, full, meta)

{ return ''; }

{

data: null, render: function (data, type, row) {

return "";

}

$(document).ready(function () {
//loadData();
$("#tblLocation").dataTable({
ajax: {
type: "get",
url: "/Location/List",
dataType: "json",
dataSrc: ""
},
paging: true,
sort: true,
pageLength: 10,
searching: true,
columns: [
{ 'data': 'Id', "autoWidth": true },
{ 'data': 'Description', "autoWidth": true },
{ 'data': 'IsActive', "autoWidth": true },
{
"render": function (data, type, full, meta)
{ return ' + full.Id + '">'; }
},
{
data: null, render: function (data, type, row) {
return " + row.Id + "'); >";
}
},
]
});
$('body').on('click', '[id*=btnEdit]', function () {
var data = $(this).parents('tr').find('td');
var id = data.eq(0).html();
var description = data.eq(1).html();
$('[id*=txtId]').val(id);
$('[id*=txtDescription]').val(description);
$("#btnAdd").hide();
$(".modal-title").html("Update");
$("#btnUpdate").show();
$('#myModal').modal("show");
});
});

Thanks

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
step 1.
{
data: "Id",
render: function (data) {
return " + data + ">fa fa-pencil">";

}
},
{
data: "Id",
render: function (data) {
return " + data + ">fa fa-trash">";

}
}

step 2.

$('#tblLocation').on('click', '.btnEdit', function (e) {
       debugger;
   e.preventDefault();
       var dtTable = $('#dataTable').DataTable()
       var item =(dtTable.row($(this).closest('tr')).data());
       var id = item.Id;
       var Desc= item.Description;
       var IsActive = item.IsActive;
       $("#txtId").val(id);
       $("#txtDescription").val(Desc);
       $("#txtIsActive").val(IsActive);
       $('#myModel').modal('show')
   });

$('#tblLocation').on('click', '.btnDelete', function (e) {
        debugger;
e.preventDefault();
        var Id = $(this).attr("data-Id");
        $.ajax({

            type: "Post",
            url: "/Admin/DeletePost",
            dataType: "html",

            data: { Id: Id },

            cache: false,
            success: function (res) {
                debugger;
                $('#dataTable').DataTable().ajax.reload();

                alert("Deleted successfully");

            }
        })


    });
public int DeletePost(string Id)
       {
       int id= Convert.ToInt32(Id);
     var loc=     _Context.Locations.Find(id);
          _Context.Locations.Remove(loc);
         -Context.SaveChanges();
           return 1;
       }
0
Asma Khalid5y ago
Use the line as follow i.e.
columns :
[

   {
       "data": null,
       "render": function (data, type, row, meta)
        {
               return ' + row().index() + ');" >Delete';
        }
    }
]
Mark answer as accepted if helpful

Thanks & Regards,
Asma Khalid

For More Visit: www.asmak9.com or www.bytezaar.com
0