Develop Reference

data sorting via primary key in jquery data table

I have displayed data in view page using data table. I want to display data in descending order according to
public ActionResult Index()
{
return View(db.BusinessRegModel.OrderByDescending(v => v.BusinessId).ToList());
}
BusinessId is primary key.
But in view page, data is not sorted via primary key. I am using jquery data table to display data.
<table id="tblBusinessData" class="table" width="100%" cellspacing="0">
<thead>
<tr>
<th>Edit/Print</th>
<th>
#Html.DisplayNameFor(model => model.RegNum)
</th>
<th>
#Html.DisplayNameFor(model => model.RegDate)
</th>
<th>
#Html.DisplayNameFor(model => model.NameOfFirm)
</th>
//code blocks
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td width="20%">
#Html.ActionLink("Edit", "Edit", new { id = item.BusinessId }, new { #class = "btn btn-warning" })
#Html.ActionLink("Print", "Details", new { id = item.BusinessId }, new { #class = "btn btn-danger" })
</td>
//code blocks
But the data is not sorted in descending order via BusinessId key. How can I do this? I need to display data in descending order by BusinessId.
jquery code
<script type="text/javascript">
$('#tblBusinessData').DataTable();
</script>

Add the column Id to the HTML and hide it via configuration:
$('#tblBusinessData').DataTable({
"columnDefs": [{
"targets": [0],
"visible": false
}],
"order": [
[0, "desc"]
]
});

If you are able to set the desired order in your data before you send it to DataTables, you can simply set order: [] to disable the initial sort while still being able to click on the column headers.
$('#tblBusinessData').DataTable({
order: []
});

How to display json array coming from url through ajax in angularjs

I have a json array coming from a url:
http://blahblahblah.com/company/all, like this:
in angularjs controller, i have something like this:
$('#example-1').DataTable({
"ajax" : 'http://blahblahblah.com/company/all',
"columns": [
{"data": "companyId"},
{.....}, // I can't assign "data" name to array because it is already unnamed.
]
});
Traversing in html table_id example-1
<table id="example-1" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Company</th>
<th>Legal Name</th>
<th>DBA Name</th>
<th>Formation</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Company</th>
<th>Legal Name</th>
<th>DBA Name</th>
<th>Formation</th>
</tr>
</tfoot>
Output:
So, my question is how do I identify the column names from above UNNAMED JSON ARRAY mentioned on top of the question, and display it in html table. Waiting for your kind response.
I am thinking to do something like this

$(document).ready(function() {
$('#example').DataTable( {
"ajax": "http://blahblahblah.com/company/all",
"columns": [
{ "data": "companyId" },
{ "data": "legalName" },
{ "data": "dbaName" },
{ "data": "formation"}
]
} );
} );
you need to add more information to the datatable while intializing what are the keys to be shown. form more details check datatable objects

I was unable to identify the correct syntax of identifying and using the column names in my JSON array, which I did like this, and solved my problem. So now the data is displayed fine in my table, this way:
$.getJSON('http://blahblahblah/company/all', function(data) {
$('#companies').DataTable({
"aaData": data,
"aoColumns": [
{"mDataProp":"companyId"},
{"mDataProp":"legalName"},
{"mDataProp":"dbaName"},
{"mDataProp":"formation"}
]
});
});
I also added hyperlink to companyId like this:
$.getJSON('http://blahblahblah/company/all', function(data) {
var companyId = null;
$('#companies').DataTable({
"aaData": data,
"aoColumns": [
{"mDataProp":"companyId", "render": function(data, type, row, meta) {
if( type==='display' ) {
companyId = data;
data = '' + data + '';
}
return data;
}},
{"mDataProp":"legalName"},
{"mDataProp":"dbaName"},
{"mDataProp":"formation"}
]
});
});
I am thankful to all of you for helping me grab the track.
Thanks.

Actual way to do this is to use ng-repeat in the data array. And for the data fetch, use an angular service with a promise.
In the Controller
var self = this;// this is the controller which is aliased as ctrl at routing
var theData = yourService.FetchData(params).then(function(data){
self.tableData = data; // not going for the exact implementation.
},function(err){
manageError(err);// manage your errors here.
}));
In the HTML
<table id="example-1" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Company</th>
<th>Legal Name</th>
<th>DBA Name</th>
<th>Formation</th>
</tr>
</thead>
<tr ng-repeat="var item in ctrl.tableData ">
<td>{{item.companyId}}</td>
<td>{{item.legalName}}</td>
<td>{{item.dbaName}}</td>
<td>{{item.formation}}</td>
</tr>
</table>

how to populate jquery datatables with json?

I am using jquery datatable in my application, plugin link https://datatables.net/
I want to populate my datatable with JSON, but I am failed.here is my code.
HTML:
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Code</th>
<th>Description</th>
<th>isActive</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>Name</th>
<th>Code</th>
<th>Description</th>
<th>isActive</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
JS:
$(document).ready(function() {
console.log("hi ready");
$('#example').DataTable({
retrieve: true,
ajax: {
url: '/ProductLicensingApplication/feature/list',
dataSrc: ''
},
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "code" },
{ "data": "description" },
{ "data": "isActive" }
]
});
} );
my json
but I am not able to populate data into the table as the table shows no data available in the table..you can see in the image
please tell me what is the problem in my code...

As written in documentation. The ajax.dataSrc option is used to tell DataTables where the data array is in the JSON structure. An empty string is a special case which tells DataTables to expect an array.
In your case JSON is an object and you should set dataSrc : 'features'

Ahmad,
Either set dataSrc : 'features' or if possible rename the attribute name 'features' to 'data' in the response data.

How to use vue-router and router-link to handle links dynamically created in jquery modules such a datatables?

I tried for a while to "integrate" datatables.net (https://datatables.net/) with a Vue app.
Eventually I stumbled on comments that essentially suggest not so much to try integration, but rather, leverage jquery modules as-in and "hook" them in via a mounted/created event.
So, in that vein, I have the following code nearly working
<template>
<table aria-describedby="feedback-history_info" role="grid" id="feedback-history" class="table table-bordered table-striped dataTable">
<thead>
<tr role="row">
<th>ID</th>
<th>Created Date</th>
<th>Project</th>
<th>Reviewer</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th colspan="1" rowspan="1">Created Date</th>
<th colspan="1" rowspan="1">Project</th>
<th colspan="1" rowspan="1">Reviewer</th>
<th colspan="1" rowspan="1">Status</th>
</tr>
</tfoot>
</table>
</template>
<script>
import $ from 'jquery'
// Require needed datatables modules
require('datatables.net')
require('datatables.net-bs')
import moment from 'moment'
export default {
name: 'Feedback',
data() {
return {}
},
mounted() {
$('#feedback-history').DataTable({
"ajax": "/index.sjs?list",
"processing": false,
"serverSide": true,
"columns": [
{
"data": "id"
},
{
"data": "created"
},
{
"data": "projectName"
},
{
"data": "reviewer"
},
{
"data": "status"
}
],
"columnDefs": [{
"render": function(data, type, row) {
return moment(parseInt(data)).format('MMMM Do YYYY');
},
"targets": 1
},
{
"render": function(data, type, row) {
// I want to use router-link similar to following
return `<router-link :to="{ name: 'FeedbackEdit', params: { feedbackId: ${ row.id } }}">${ row.projectName }</router-link>`
// To render as ...
// ${data}
},
"targets": 2
},
{
"visible": false,
"targets": [0]
}
]
})
}
}
</script>
<style>
</style>
Only issue is in the rendering of links in my datatable cells. As I'm using vue-router, I need to vue-router via router-link to "handle links". (See comments in code).
Any help is appreciated.

In the end, I did not use router-link.
Rather I used vuex and saved enough session information to the vuex store such that on page refresh I could re-render the view appropriately.
While technically this is a page refresh or "page flip" and not the reactive SPA-way of using the DOM (or shadow-DOM) to manipulate the view, it does give a near-enough experience in the absence of a better approach.

Rendering a table with dynamic headers

I have to render a table with dynamic headers, I mean, I don't want to do something like this in the HTML
<table>
<tr>
// THIS TABLE ROW IS WHAT I SAY
<th>here info</th>
<th>something here</th>
<th>another header</th>
</tr>
<tr ng-repeat="thing in things">
<td>{{thing.asfs}}</td>
<td>{{thing.asx}}</td>
<td>{{person.dsf}}</td>
</tr>
</table>
I want something like this
<table>
<tr ng-repeat="head in heads">
{{head}}
</tr>
<tr ng-repeat="bar in bars">
<td ng-repeat="foo in foos"></td>
</tr>
</table>
that is only an example, I need to do it with this data:
{
"55f6de98f0a50c25f7be4db0":{
"clicks":{
"total":144,
"real":1
},
"conversions":{
"total":4,
"amount":229
},
"cost":{
"cpc":0.1999999999999995,
"ecpc":1145.0000000000027,
"total":28.79999999999993
},
"revenue":{
"total":4,
"epc":0.027777777777777776
},
"net":{
"roi":-1.1612903225806457,
"total":4
},
"name":"Traffic Source #2",
},
"55f6de98f0a50c25f7be4dbOTHER":{
"clicks":{
"total":144,
"real":1
},
"conversions":{
"total":4,
"amount":229
},
"cost":{
"cpc":0.1999999999999995,
"ecpc":1145.0000000000027,
"total":28.79999999999993
},
"revenue":{
"total":4,
"epc":0.027777777777777776
},
"net":{
"roi":-1.1612903225806457,
"total":4
}
"name":"Traffic Source #3"
},
}
every key, like clicks, conversions, cost, etc, should be a td, it is just that I don't want static HTML.
Any suggestions?
EDIT
And also, sometimes that object will grow, could come up with some more keys like this one 55f6de98f0a50c25f7be4db0
I did this fiddle with the exact same data I am receiving
http://jsfiddle.net/wLkz45qj/

UPDATE:
What you need to do is first convert you inconvenient object to array of objects with simple structure, and then use my code , i.e.
{
a: {
b:{
c: 'x'
}
}
}
will turn into
[[ a, { 'b.c' : 'x' }], ...]
or just
[{ _id : a , 'b.c' :'x'}, ...]
easiest way to do that is to use lodash or underscore ( check map, flatMap, pairs etc)
#jperezov showed you core idea, little bit detailed example:
$scope.peopleKeys = Object.keys(people[0])
and
<table>
<tr>
<th></th>
<th ng-repeat="personKey in peopleKeys">
{{ personKey }}
</th>
</tr>
<tr ng-repeat='p in people'>
<th>{{ $index }}</th>
<td ng-repeat="personKey in peopleKeys">
{{ p[personKey] }}
</td>
</tr>
</table>
You may also have some dictionary with display names:
$scope.displayNames = {
id: 'ID',
firstName: 'First Name'
...
}
and then your header going to be:
<tr>
<th></th>
<th ng-repeat="personKey in peopleKeys">
{{ displayNames[personKey] }}
</th>
</tr>
PS: OR you can just use ui-grid

var app = angular.module('myApp', []);
function PeopleCtrl($scope, $http) {
$scope.headers=[];
$scope.data = [];
$scope.LoadMyJson = function() {
for (var s in myJson){
$scope.data.push(s);
if ($scope.headers.length < 1)
for (var prop in myJson[s]){
prop.data = [];
$scope.headers.push({th:prop, td: []});
}
}
for (var s in $scope.data){
for (var prop in $scope.headers){
var header = $scope.headers[prop].th;
var data = myJson[$scope.data[s]][header];
$scope.headers[prop].td.push(data);
}
}
};
}
What you're looking for is something like this, I think:
http://jsfiddle.net/wLkz45qj/8/
Maybe iterate another time over "inner" for formatting.