Develop Reference

pass json data collectio into DataTable

I trying to insert json collection in datatable using jQuery.
This is my code:
function reloadseekers(vacancy){
if (vacancy) {
$.ajax({
url: '/getseekers/' + vacancy,
method: "GET",
dataType: "json",
cache: false,
success: function (data) {
$.each(data.appseekers, function (index) {
$('#evaluated_list_table').dataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"data": data.appseekers,
"columns": [
{ "title": "SSN" },
{ "data": data.appseekers[index].ssn},
{ "title": "Full Name" },
{ "data": data.appseekers[index].first_name + ' '+data.appseekers[index].second_name +' '+data.appseekers[index].middle_name+' '+data.appseekers[index].last_name },
{ "title": "Primary phone" },
{ "data": data.appseekers[index].phone_1},
{ "title": "Secondary phone " },
{ "data": data.appseekers[index].phone_2},
{ "title": "Secondary phone " },
{ "data": data.appseekers[index].evaluation.total_evaluation},
]
});
});
}
}
}
The table empty and without any data,,, the json data is already gotten from the server:
The json data from the server
what is wrong in this code? help please

Datatable columndefs not being hit

I have been trying to render my json in datatable. The json format i have been working with is as follows:
{
message: "",
data: {
count: "",
result: [
{
parameter1: "",
parameter2: "",
parameter3: "",
},
{
parameter1: "",
parameter2: "",
parameter3: "",
},
]
}
}
Datatable Code is as follow
$('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
url: "https://c22c6e75-a9b9-4762-8f5d-b25137536fa6.mock.pstmn.io/iprSearchData",
},
"columnDefs": [
{
"targets": [0],
"data": function (row, type, val, meta) {
// not hitting
console.log(row);
console.log(type);
console.log(val);
console.log(meta);
},
"render": function (data, type, row) {
console.log(data);
console.log(row);
return data;
},
},
// {targets: [0], visible: true},
// {targets: '_all', visible: false}
]
});
I read the documentation and I assume the data(JSON) format is creating problems for me in rendering or is it some other issue?
I want to render my parameters in reult array of the JSON to be displayed in a single column.
Thanks in advance.

The JSON format was the issue. Use datasrc in ajax for appropriate data from the returned ajax.

Can't Display Datetime on datatable Plugins

I am displaying a list from the database, but the date time column is showing this error:
/Date(1492421931187)/
JS:
<script>
$(document).ready(function () {
$('#myTable').DataTable({
"ajax": {
"url": "Default/load",
"type": "GET",
"datatype" : "json"
},
"columns": [
{ "data": "Id", "autowidth": true },
{ "data": "Name", "autowidth": true },
{ "data": "Phone", "autowidth": true },
{ "data": "Num", "autowidth": true },
{ "data": "Date", "autowidth": true },
{ "data": "Message", "autowidth": true }
]
});
});
</script>
Controller:
var data = db.data_customer.Select(x => new { x.Id, x.Name, x.Message, x.Num,
x.Phone, x.Date }).OrderBy(x => x.Date).ToList();
return Json(new { data = data }, JsonRequestBehavior.AllowGet);
Json:
data
:
[{Id: 8, Name: "12312", Message: "123123", Num: 12, Phone: "3123132", Date: "/Date(1492421931187)/"}]

You need to change date format. Refer below code. In this code I am passing your JSON date value in date variable and as per requirement I am displaying date
$(document).ready(function(){
var dt=new Date(1492421931187);//Your JSON date
var getDate=dt.getDate();
var getMonth=dt.getMonth()+1;
var getYear=dt.getFullYear();
$("#abc").html("Date (dd/mm/yyyy)="+getDate+" / "+getMonth+" / "+getYear);
$("#abcd").html("Date full date ="+dt);
});
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js">
</script>
<p id="abcd">Full Date</p>
<p id="abc">dd/mm/yyyy</p>
I have created a function which changes date format so that your issue will be resolved. I have updated my code in jsfiddle. Hopefully it will help you http://jsfiddle.net/GSB/b8bdjhhq/5/

Send more values via URL

I am using Datatable plug-in to print values from database.
I get results and it prints in table. Now I am having trouble with sending values to the other file. Values that I need to send are userID, all titles of column except for last title, and two other variables which contains date.
When I click on '', beside data that contains userId, I need to send "User, Work time, Additions, Business, Break" as well as two variables printed below.
Other two variables are:
var date1 = "2017-01-01";
var date2 = "2017-02-28";
$('#myData').DataTable( {
data: dataSet,
fixedHeader: true,
responsive: true,
"columns": [
{ title: "User", data: "ime"},
{ title: "Work time", data: "Rad" },
{ title: "Additions", data: "Privatno" },
{ title: "Business", data: "Poslovno" },
{ title: "Break", data: "Pauza" },
{
"title": '<i class="icon-file-plus"></i>',
"data": "userID",
"render": function (data) {
return '' + '<i class="icon-file-plus"></i>' + '';
}, "width": "1%",
}
]
,"columnDefs": [ { "defaultContent": "-", "targets": "_all" },{ className: "dt-body-center", "targets": [ 5 ] } ]
});
Any help or advice is appreciated, I am stuck here.

internet explorer select dropdown collapse

i have select dropdown which picks no. of pages to be shown as jquery pagination. everything is fine but when it comes to ie. select dropdown collapses.see image.
i also refered link
but it seems it will not work for me.I am doubtful that is it ie default behaviour and can't do much....
<script type="text/javascript">
$(document).ready(function() {
var url="${pageContext.request.contextPath}/aaa/aaa/aaa";
url+="?fromDate=${fromDate}";
url+="&toDate=${toDate}";
url+="&callType=${callType}";
url+="&fullListSize=0";
var table = $('#call_history_detail').DataTable({
"preDrawCallback": function( settings ) {
$("#searchTable").val("");
$('body').modalProgress("show");
},
"drawCallback": function( settings ) {
wordWrap("userName", 80, 2);
$('body').modalProgress("hide");
},
"processing": true,
"serverSide": true,
"searching": false,
//"ajax": url,
"ajax": {
"contentType": "application/json",
"url": url,
"data": function ( d ) {
var drawValue = d.draw;
var length = d.length;
var start = d.start;
var sortCol = d.order[0].column;
var sortType = d.order[0].dir;
return "draw=" + drawValue + "&length=" + length + "&start=" + start + "&sortCol=" + sortCol + "&sortType=" + sortType;
}
},
"oLanguage": {
"sLengthMenu": "Show _MENU_ entries. <img src='${pageContext.request.contextPath}/img/ico_info.png' class='tt'" +
"title='The search function will only search the page you are currently viewing. To do a more expansive search, increase the entries per page. Increasing the entries per page can increase load time.' />"
},
"lengthMenu": [ [25, 50, 100, 500, 1000, 5000], [25, 50, 100, 500, 1000, 5000] ],
"columns": [
{ "name": "userName" },
{ "name": "callType"},
{ "name": "date" },
{ "name": "time" },
{ "name": "from" },
{ "name": "to" },
{ "name": "cost", "width": "10%" },
{ "name": "duration", "width": "10%" }
],
"columnDefs": [
{
"class": "userName",
"data": "userName",
"defaultContent": "",
"targets": 0
},
{
"class": "callType",
"data": "callType",
"defaultContent": "",
"targets": 1
},
{
"class": "date-time",
"data": "timeStart",
"render": function (data) {
return getShortDate(data);
},
"defaultContent": "",
"targets": 2
},
{
"class": "date-time",
"data": "timeStart",
"render": function (data) {
return getTimeString(data);
},
"defaultContent": "",
"targets": 3
},
{
"class": 'number',
"data": "origNumber",
"defaultContent": "",
"orderable": true,
"targets": 4
},
{
"class": 'number',
"data": "destNumber",
"defaultContent": "",
"orderable": true,
"targets": 5
},
{
"class": 'cost',
"data": "totalAmount",
"render": function (data) {
return "$"+data.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
},
"defaultContent": "",
"targets": 6
},
{
"class": 'duration',
"data": "callDuration",
"defaultContent": "00:00:00",
"orderable": false,
"targets": 7
}
],
"order": [[ 2, "desc" ]]
});
$('#backToSummary').click(function(e){
e.preventDefault();
$('form#call-history-options').submit();
});
});</script>

Add this to the css div z-index: value;