🔒 Closed [SOLVED ]JQuery Responsive DataTable Paano mag render ng date?

[1nn0c3ntv5]

Kapag sa typical view yung table ko nirerender na yung date

Pero kapag nasa responsive version naman hindi siya na rerender ng function ko

As much as possible ayoko sana gumamit ng mga additional na library. Possible po ba to ma render pag nasa responsive version?

[CODE lang="javascript" title="Jquery Table"] function LoadVolunteer() {
table = $('#VolunteerTable').DataTable({
bLengthChange: false,
destroy: true,
responsive:true,

order: [[1, 'asc']],
ajax: {
type: "GET",
"url": "/DataGet/GetAssignedConcerns?VolunteerID",
data: { VolunteerID: @ViewBag.UserInformationID},
dataSrc: function (json) {
var a = new Array();
for (var b = 0; b <= json.length - 1; b++) {
var c = json;
a.push({
'VolunteerID': c.VolunteerID,
'FamilyName': c.FamilyName,
'GivenName': c.GivenName,
'MaidenName': c.MaidenName,
'FullName': c.GivenName + " " + c.MaidenName + " " + c.FamilyName,
'Notes': c.Notes,
'UserInformationID': c.UserInformationID,
'DateReported': c.DateReported,
'CaseLocation': c.CaseLocation,
'EnvironmentalConcernID': c.EnvironmentalConcernID,
'XCoordinates': c.XCoordinates,
'YCoordinates': c.YCoordinates,
'UpdatedStatusDate': c.UpdatedStatusDate,
'PhotoLink': c.PhotoLink,
'SpecificEnvironmentalConcernID': c.SpecificEnvironmentalConcernID,
'CaseReportID': c.CaseReportID,
'Concern': c.Concern,
'SubCategory': c.SubCategory


});
}
return a;
},
},
columns: [
{
title: "Action",
"render": function () {
var del = "<a class='btn btn-danger btn-xs btnReject' title='Delete' style='color: white'><i class='fas fa-times'></i></a>";
var approve = "<a class='btn btn-success btn-xs btnUpdate' title='Edit' style='color: white'><i class = 'fas fa-check'></i></a>";
//var view = "<a class='btn btn-primary btn-xs btnView' title='Edit' style='color: white'><i class = 'fa fa-1x fa-address-card'></i></a>";

// return view + " " + approve + " " + del;
return approve + " " + del;

},
width: "80px"
},
{
title: "Case No.",
data: "CaseReportID"
},
{
title: "Type",
data: "Concern"
},
{
title: "Category",
data: "SubCategory"
},
{
title: "Area",
data: "CaseLocation"
},
{
title: "Date Assigned",
data: "UpdatedStatusDate",
"render": function (value) {
if (value === null) return "";

var pattern = /Date\(([^)]+)\)/;
var results = pattern.exec(value);
var dt = new Date(parseFloat(results[1]));

return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
},

},

],
'columnDefs': [
{
"className": "dt-center", "targets": "_all"
}],
});

return table;
};
[/CODE]

 

[bonhokage06]

Hindi kaya bug yan mismo ng DataTable library?

 

[1nn0c3ntv5]

Tingin ko hindi. Nag trial and error ako mula sa mga early versions hanggang current version ng library.

 

[bonhokage06]

baka nagkakaroon ng issue sa value sir once na responsive. check mo sir kung nagkakaroon ba ng pagkakaiba ung response ng value na ginamit mo sa
pattern.exec(value);

 

[1nn0c3ntv5]

Update

Kahit anong format na gamitin ko ayaw pa din niya

[CODE lang="javascript" title="Code"] {
title: "Date Assigned",
data: "UpdatedStatusDate",
"render": function (value) {
if (value === null) return "";

var pattern = /Date\(([^)]+)\)/;
var results = pattern.exec(value);
var dt = new Date(parseFloat(results[1]));

return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
},

},
{
title: "Date Assigned",
data: "UpdatedStatusDate",
"render": function (value) {
return moment(value).format('MM/DD/YYYY');
}
},
{
title: "Date Assigned",
data: "UpdatedStatusDate",
"render": function (value) {
return new Date(parseInt(value.substr(6)));
}
}[/CODE]

 

[bonhokage06]

tingin ko dito nagkakaproblema var results = pattern.exec(value)

 

[1nn0c3ntv5]

Na check ko na din, hindi ata gumagana yun pag responsive na mismo. Kahit gumamit ako ng mga lbrary ayaw din niya

 

[1nn0c3ntv5]

Solved ko na haha

Yung una kong ginawa ay
Get Data -> Load Data -> Render Data -> Present to Table

eh yung problema pala sa responsive ay hindi siya nag rerender kaya dapat bago mo i present nirender mo na

Get Data -> Render Data -> Load Data -> Present to Table


Check line 29 as reference

[CODE lang="javascript" title="Final"] function LoadVolunteer() {
table = $('#VolunteerTable').DataTable({
bLengthChange: false,
destroy: true,
responsive:true,

order: [[1, 'asc']],
ajax: {
type: "GET",
"url": "/DataGet/GetAssignedConcerns?VolunteerID",
data: { VolunteerID: @ViewBag.UserInformationID},
dataSrc: function (json) {
var a = new Array();
for (var b = 0; b <= json.length - 1; b++) {
var c = json;
a.push({
'VolunteerID': c.VolunteerID,
'FamilyName': c.FamilyName,
'GivenName': c.GivenName,
'MaidenName': c.MaidenName,
'FullName': c.GivenName + " " + c.MaidenName + " " + c.FamilyName,
'Notes': c.Notes,
'UserInformationID': c.UserInformationID,
'DateReported': c.DateReported,
'CaseLocation': c.CaseLocation,
'EnvironmentalConcernID': c.EnvironmentalConcernID,
'XCoordinates': c.XCoordinates,
'YCoordinates': c.YCoordinates,
'UpdatedStatusDate': moment(c.UpdatedStatusDate).format('MM/DD/YYYY'),
'PhotoLink': c.PhotoLink,
'SpecificEnvironmentalConcernID': c.SpecificEnvironmentalConcernID,
'CaseReportID': c.CaseReportID,
'Concern': c.Concern,
'SubCategory': c.SubCategory


});
}
return a;
},
},
columns: [
{
title: "Action",
"render": function () {
var del = "<a class='btn btn-danger btn-xs btnReject' title='Delete' style='color: white'><i class='fas fa-times'></i></a>";
var approve = "<a class='btn btn-success btn-xs btnUpdate' title='Edit' style='color: white'><i class = 'fas fa-check'></i></a>";
//var view = "<a class='btn btn-primary btn-xs btnView' title='Edit' style='color: white'><i class = 'fa fa-1x fa-address-card'></i></a>";

// return view + " " + approve + " " + del;
return approve + " " + del;

},
width: "80px"
},
{
title: "Case No.",
data: "CaseReportID"
},
{
title: "Type",
data: "Concern"
},
{
title: "Category",
data: "SubCategory"
},
{
title: "Area",
data: "CaseLocation"
},
{
title: "Date Assigned",
data: "UpdatedStatusDate"
},

],
'columnDefs': [
{
"className": "dt-center", "targets": "_all"
}],
});

return table;
};[/CODE]

 

[1nn0c3ntv5]

 

[bonhokage06]

sorry ts wala ako naitulong.good job!!!