jquery datatable doesn't sort - javascript

I have a jquery datatable that is populated by server side ajax. Supposedly, datatables are supposed to be sortable by default without having to add any parameters. Mine isn't. The sort arrows show up in the column headers and clicking on them flips the arrow but nothing gets sorted.
Here's the datatable definition:
$('#appPotTable').DataTable({
"ordering": true,
"processing": true,
"serverSide": true,
"ajax": "/MoneyMachine/screen_analystEst.php",
"columns": [
{ "data": "Symbol", "sortable":true },
{ "data": "CompanyName" },
{ "data": "StockType" },
{ "data": "ExDivDate" },
{ "data": "Dividend" },
{ "data": "DivYield" },
{ "data": "DivFrequency" },
{ "data": "DivPayDate" },
{ "data": "PriceToNav" },
{ "data": "AppreciationPotential" }
]
});
I've tried it with and without the "ordering" and "sortable" parameters but same result. I've also tried various column definition parameters with no joy. Suggestions?

Thanks to Ogreucha for suggesting to turn off server side processing. I did that and now sorting works fine. Here is the new code:
$('#appPotTable').DataTable({
"ajax": "/MoneyMachine/screen_analystEst.php",
"columns": [
{ "data": "Symbol" },
{ "data": "CompanyName" },
{ "data": "StockType" },
{ "data": "ExDivDate" },
{ "data": "Dividend" },
{ "data": "DivYield" },
{ "data": "DivFrequency" },
{ "data": "DivPayDate" },
{ "data": "PriceToNav" },
{ "data": "AppreciationPotential" }
]
});

Related

Format data returned from JSON in DataTable [duplicate]

This question already has answers here:
use of comma and datatable decimals
(2 answers)
Closed 7 months ago.
I am reading a json file from remote url and displaying it in DataTable.
<script>
$(document).ready(function () {
$('#example').DataTable(
{
ajax: {
method: 'GET',
url: 'https://chainformed.s3.us-east-1.amazonaws.com/Data/mostwatched.json',
dataSrc: ''
},
paging: false,
responsive: true,
language: {
url: "//cdn.datatables.net/plug-ins/1.12.1/i18n/tr.json",
},
columns: [
{ "data": "id" },
{ "data": "rank" },
{ "data": "name" },
{ "data": "watchlist" },
{ "data": "percentage" },
{ "data": "difference" },
{ "data": "timestamp" }
]
});
$('.dataTables_length').addClass('bs-select');
});
</script>
I would like to be able to format and manipulate the data returned from that json file. What is the best way to do it?
For example, i would like to change the values from ({ "data": "watchlist" }) field to number format with comma. How can i achieve it?
I tried this but with no luck: https://datatables.net/reference/option/ajax.dataSrc
Use render element.
Read document from Format output data - orthogonal data
and example
Another way u can use columnDefs
<script>
$(document).ready(function () {
$('#example').DataTable(
{
ajax: {
method: 'GET',
url: 'https://chainformed.s3.us-east-1.amazonaws.com/Data/mostwatched.json',
dataSrc: ''
},
paging: false,
responsive: true,
language: {
url: "//cdn.datatables.net/plug-ins/1.12.1/i18n/tr.json",
},
columns: [
{ "data": "id" },
{ "data": "rank" },
{ "data": "name" },
{ "data": "watchlist" },
{ "data": "percentage" },
{ "data": "difference" },
{ "data": "timestamp" }
],
'columnDefs': [
{
"targets": 3,
"data": "watchlist",
"render": function ( data, type, row, meta ) {
return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
}
]
});
$('.dataTables_length').addClass('bs-select');
});

Ordering columns in JQuery DataTable -- when data is fed through Javascript

There are some forum questions similar to what I'm trying to do but I haven't been able to make it work.
We are pulling data into a DataTable through javascript. I'd like to set the data-order using a different column.
However, when I try the column is being interpreted as a string and not integer.
Here is what makes the table:
var securityTable = $('#security-table').DataTable({
"data": securitydata.guards,
"columns": [
{
"className": 'details-control',
"data": null,
"orderable": false,
//creates square for details row
"render": function (d) {
return '<i class="fa fa-plus-square" aria-hidden="true"></span>';
},
"defaultContent": ''
},
// is sorting by "sort" but is seeing numbers as alphebetical not numeric
{ "data": {
_: "date.display",
sort: "date.date_order"
} },
{ "data": "place" },
{ "data": {
_: "shot.display",
sort: "shot.shot_order"
} },
],
"paging": false,
"searching": false
});
This is what the data looks like:
var securitydata = {
"guards": [
{
"date": {
"display": "April 15, 2011",
"date_order": 1
},
"reported": "Yes",
"place": "Chicago, auto parts yard",
"shot": {
"display": "No one hit",
"shot_order": 24
},
"blurb": "A 52-year-old guard at an auto parts lot shot at a vehicle he said was coming toward him. The man inside the vehicle, accused of stealing equipment from the lot, drove away and was not reported injured.",
"link": ""
},
This is what we were using for help
Using the same example, but with sorthing
$(document).ready(function() {
$('#example').DataTable( {
order: [[ 2, "desc" ]],
ajax: "data/orthogonal.txt",
columns: [
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "extn" },
{ data: {
_: "start_date.display",
sort: "start_date.timestamp"
} },
{ data: "salary" }
]
} );
} );
Link to order here

How to load Datatables from JSON object directly on Ajax success result?

After long time searching here around I can't find a solution to this problem, loading Datatables via Ajax GET is well documented but how can I use directly a JSON response after an Ajax POST?
This is my PHP function:
function getRelated() {
var elements = (document.getElementsByClassName('exashare'));
var query = [];
for(var i=0;typeof(elements[i])!='undefined';query.push(elements[i++].getAttribute('data-id')));
query = query.join(',');
$.ajax({
type: "POST",
url: baseUrl+"/requests/get_related.php",
data: "query="+query+'&_token='+_token,
cache: false,
success: function(html){
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
'url':jQuery.parseJSON(html),
"dataSrc": ""
},
"columns" : [
{ "data": "#" },
{ "data": "id" },
{ "data": "art" },
{ "data": "name" },
{ "data": "title" },
{ "data": "tag" },
{ "data": "likes" },
{ "data": "views" },
{ "data": "duration" },
{ "data": "time" }
]
});
}
});
}
The JSON on success looks like this:
{
"data": [{
"#": "1",
"id": "9",
"art": "default\/def8.jpg",
"name": "Simon The Cat",
"title": "Riflessioni sulla vita",
"tag": "riflessioni,vita,",
"likes": "1",
"views": "1024",
"duration": "185",
"time": "2015-11-30 19:36:31"
}, {
"#": "2",
"id": "15",
"art": "default\/def2.jpg",
"name": "Simon The Cat",
"title": "Riflessioni sulla morte",
"tag": "riflessioni,morte,",
"likes": "1",
"views": "1003",
"duration": "185",
"time": "2015-11-14 12:06:21"
},
...]
}
I also tried this:
//from this:
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
'url':jQuery.parseJSON(html),
"dataSrc": ""
},
...
//to this:
$('#example').DataTable( {
"ajax": jQuery.parseJSON(html),
...
But on console it always shows me the error "lenght of undefined".
I already tried to load data directly from a JSON file url
containing the same response here above and it works well.
How can I load JSON data on Ajax POST success results to populate my table?
Finally, after many tries, I found the solution that works with the latest Datatables release (1.10.13):
function getRelated() {
var elements = (document.getElementsByClassName('exashare'));
var query = [];
for(var i=0;typeof(elements[i])!='undefined';query.push(elements[i++].getAttribute('data-id')));
//parse as string
query = query.join(',');
$.ajax({
type: "POST",
url: baseUrl+"/requests/get_related.php",
data: "query="+query+'&_token='+_token,
cache: false,
success: function(html){
//html is a json_encode array so we need to parse it before using
var result = jQuery.parseJSON(html);
$('#example_ert').DataTable( {
//here is the solution
"data": result.data,
"ajax": {
"url": result,
"dataSrc": ""
},
"columns" : [
{ "data": "#" },
{ "data": "id" },
{ "data": "art" },
{ "data": "name" },
{ "data": "title" },
{ "data": "tag" },
{ "data": "likes" },
{ "data": "views" },
{ "data": "duration" },
{ "data": "time" }
]
});
}
});
}

How to add edit functionality in datatable with bootstrap and MVC

I have done following code and now iI want to add edit column in Bootstrap Datatable with server side functionality in MVC and Bootstrap. Finally I want proper CRUD operation, so how can I approach for this?
<script type="text/javascript">
var assetListVM;
$(function () {
assetListVM = {
dt: null,
init: function () {
dt = $('#assets-data-table').DataTable({
"serverSide": true,
"processing": true,
"ajax": {
"url": "#Url.Action("Get","Asset")"
},
"columns": [
{ "title": "ID", "data": "ID", "searchable": true },
{ "title": "Name", "data": "Name", "searchable": true },
{ "title": "City", "data": "City", "searchable": true },
{ "title": "EmpCode", "data": "EmpCode", "searchable": true },
{ "title": "DOJ", "data": "DOJ", "searchable": true },
{ "title": "Address", "data": "Address" },
{ "title": "DOB", "data": "DOB" }
],
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
});
}
}
// initialize the datatables
assetListVM.init();
});
</script>

How to Pass geojson array to datatable dyanamically using javascript

I want to pass one geojson file to dynamically created datatable using javascript,I am unable to identify column names in file..
I have tried this..
CODE
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>fC.type</th>
<th>f.type</th>
<th>f.prop</th>
<th>f.geom.type</th>
<th>geometry.coordinates.0</th>
<th>geometry.coordinates.1</th>
</tr>
</thead>
</table>
</body>
$(document).ready(function () {
$('#example').dataTable({
"ajax": "data/json_file.json",
"processing": true,
"columns": [
{ "mData": "type" },
{ "mData": "features.type" },
{ "mData": "features.properties" },
{ "mData": "geometry.type" },
{ "mData": "geometry.coordinates.0" },
{ "mData": "geometry.coordinates.1" }
]
});
});
geojson File
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
40.078125,
57.136239319177434
],
[
91.7578125,
58.99531118795094
]
]
}
}
]
}
My output is as shown in image
The problem is actually the datafile, which is valid JSON but not the structure that datatable requires.
Solution 1 : Change the file to expected structure.
{
"data": [
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
40.078125,
57.136239319177434
],
[
91.7578125,
58.99531118795094
]
]
}
}
]
}
]
}
Solution 2 : Use the dataSrc through which you can modify the ajax response before datatable uses it.
$('#example').dataTable({
"ajax":
{
"url": "json1.json",
"dataSrc": function (json) {
var obj = [];
obj.data = [];
obj.data[0] = json;
return obj.data;
},
},
"processing": "true",
"columns": [
{ "data": "type" },
{ "data": "features.0.type" },
{ "data": "features.0.properties" },
{ "data": "features.0.geometry.type" },
{ "data": "features.0.geometry.coordinates.0" },
{ "data": "features.0.geometry.coordinates.1" }
]
});
Here what I've done is created a new object obj.
Working fiddle here : https://jsfiddle.net/ourqh9ts/
The problem might be that the GeoJSON is not an array but an object.
Try changing your column definitions with these:
"columns": [
{ "data": "type" },
{ "data": "features.0.type" },
{ "data": "features.0.properties" },
{ "data": "features.0.geometry.type" },
{ "data": "features.0.geometry.coordinates.0" },
{ "data": "features.0.geometry.coordinates.1" }
]

Categories