jquery - Update DataTable content with ajax -
i working datatables ajax generate table when page loads. first part of code works fine. have dropdown filtering users in datatable. can choose usersname , send post request controller , generates json data. can't find way how send json data , update datatable. here code:
public actionresult individualuser() { var taskanswer = new list<taskanswerview>(); return view(taskanswer); } public actionresult individualusergetdata(string id) { var = datetime.now; var applicationuser = db.users.firstordefault(x => x.username == id); if (applicationuser != null) { var userid = applicationuser.id; var user = db.users.find(userid); var list = db.tasksmodels .join(db.tasktousers, t => t.tasksmodelid, usr => usr.tasksmodelid, (t, usr) => new { t, usr }) .where(t1 => t1.usr.useridint == user.applicationuserid) .select(t1 => new { t1.t.heading, t1.t.tasksmodelid, t1.t.enddate, t1.t.startdate, t1.t.content, t1.t.createdby, t1.t.createdon, status = t1.t.enddate > && t1.t.startdate < ? "open" : "closed", ttu = t1.t.tasktousers.select(t => new { reply = t.replytotasks.where(x => x.tasktouser.useridint == user.applicationuserid).select(r => new { answer = r.useranswer, answertime = r.answertime, }), user = db.users.where(f => f.applicationuserid == user.applicationuserid).select(u => new { fullname = u.name + " " + u.surname }) }) }).tolist(); return json(new { data = list }, jsonrequestbehavior.allowget); } else { var data = db.tasksmodels.select(s => new { s.heading, s.startdate, s.enddate, s.createdby, s.createdon, status = s.enddate > && s.startdate < ? "open" : "closed", ttu = s.tasktousers.select(t => new { reply = t.replytotasks.select(r => new { answer = r.useranswer, answertime = r.answertime, }), user = db.users.where(f => f.applicationuserid == t.useridint).select(u => new { fullname = u.name + " " + u.surname }) }) }).tolist(); return json(new { data = data }, jsonrequestbehavior.allowget); } } @model ienumerable<deadliner.models.taskanswerview> @{ viewbag.title = "individual user"; var options = new ajaxoptions() { url = url.action("individualusergetdata"), loadingelementid = "loadingindicator", }; } @using (ajax.beginform(options)) { <div class="tablecontainer"> <p> @html.dropdownlist("id", new selectlist(new[] { "ragim-a", "qurban" }, "murad")) <input type="submit" value="submit" /> </p> <div id="loadingindicator" style="display:none;">loading...</div> <table class="table table-bordered ui" id="mytable"> <thead> <tr> <th> details </th> <th> @html.displaynamefor(model => model.heading) </th> <th> @html.displaynamefor(model => model.startdate) </th> <th> @html.displaynamefor(model => model.enddate) </th> <th> @html.displaynamefor(model => model.createdby) </th> <th> @html.displaynamefor(model => model.createdon) </th> <th> @html.displaynamefor(model => model.status) </th> </tr> </thead> </table> </div> } @section scripts { <script> $(document).ready(function () { $.fn.datatable.moment('dd/mm/yyyy'); $.fn.datatable.moment('dddd, dd/mm/yyyy'); var otable = $("#mytable").datatable({ responsive: true, "ajax": { "url": "/tasksmodels/individualusergetdata", "type": "get", "datatype": "json" }, "columndefs": [ { "classname": "dt-center", "targets": 6 } ], "order": [[3]], "columns": [ { "class": "details-control", "orderable": false, "data": null, "defaultcontent": "" }, { "data": "heading", "autowidth": true }, { "data": "startdate", "autowidth": true, "render": function (data, type, row) { if (type === 'display' || type === 'filter') { var rowvalueallday = row["enddate"]; if (rowvalueallday == 0) { return (moment(data).format("ddd dd/mm/yyyy")); } else { return (moment(data).format("mmmm yyyy, hh:mm")); } } return data; } }, { "data": "enddate", "autowidth": true, "render": function (data, type, row) { if (type === 'display' || type === 'filter') { var rowvalueallday = row["enddate"]; if (rowvalueallday == 0) { return (moment(data).format("ddd dd/mm/yyyy")); } else { return (moment(data).format("mmmm yyyy, hh:mm")); } } return data; } }, { "data": "createdby", "autowidth": true }, { "data": "createdon", "autowidth": true, "render": function (data, type, row) { if (type === 'display' || type === 'filter') { var rowvalueallday = row["enddate"]; if (rowvalueallday == 0) { return (moment(data).format("ddd dd/mm/yyyy")); } else { return (moment(data).format("mmmm yyyy, hh:mm")); } } return data; } }, { "data": "status", "autowidth": true, "render": function (data) { if (data == "open") { return '<i class="fa fa-unlock bat" aria-hidden="true" style="color:green;"></i>'; } return '<i class="fa fa-lock bat" aria-hidden="true" style="color:red;"></i>'; } } ] });
make js function in put datatable code , it's parameter filter value want apply on datatable. these filter values null or blank, when these filters applied have values in it. post these filters value along datatable call these server. call function on page load, on filters applied.
on server check if these filters not null, apply them in query, otherwise skip them. way, function handle each , every possibilities on own.
Comments
Post a Comment