Angular Datatables using data from array in Javascript - javascript

So I'm working in angular with Angular Datatables library to display tables. I've got GeoJSON data which I'm fetching from different URLs and pushing them in different arrays.
This is how the array of all the column heading looks like.
This is how the array of all the column data looks like.
Now I have 30+ columns and 100+ rows of data that I am putting in my arrays. I have to display all this data in a table, but I want to use those arrays for the same. How do I proceed with the same? I have three different URLs to fetch data from and display it and all of them have different column names and number of rows.
It's a really big project so I can't show you all of the code, but I can try showing you how I have tried creating tables and dtOptions in my .ts file.
//Declaring dtOptions as any
dtOptions1:any = {};
//Setting options for the datatable
this.dtOptions1 = {
data: item1,
paging: false,
scrollY: 150,
// scrollX: true,
processing: true,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'print'
]
};
<!--this is one of the methods I tried, even tried *ngFor, it works but then I can't use the options like search, sort, buttons, etc. Even tried all the thead and tbody tags-->
<table datatable [dtOptions]="dtOptions1" *ngSwitchCase="1">
</table>
If you need more info please do ask me. I would be happy to provide that if I can. Just need a way to solve this. Thanks

Related

How to merge rows with same value

function drawTable(url){
$('#reportList').jqGrid({
url: url,
mtype: 'GET',
datatype: 'json',
shrinkToFit:false,
width:null,
colNames:['num', 'in_charge', 'section1','section2','product','product_description','status','rate','start_date','end_date','proceed_detail'],
colModel:[
{name:'num', index:'num', hidden:true},
{name:'in_charge', index:'in_charge', hidden:true},
{name:'section1', index:'section1', width:70},
{name:'section2', index:'section2', width:140},
{name:'product', index:'product', width:80},
{name:'product_description', index:'product_description', width:300},
{name:'status', index:'status', width:45},
{name:'rate', index:'rate', width:50},
{name:'start_date', width:80, index:'start_date'},
{name:'completion_date', width:80, index:'completion_date'},
{name:'proceed_detail', index:'proceed_detail', width:400}
],
pager: '#pager',
multiselect: true,
rownumbers: true,
shrinkToFit:false,
loadonce: true,
});
}
I retrieve data from server and display it in jqGrid.
First and Second components in colModel are hidden components. So, 'section1' is the first column components to be displayed in jqGrid.
Multiple rows may have same section1 and section2.
So, What I want to do is to merge rows that have same section1 and section2. Basic tag provides rowspan to merge rows.
However, jqGrid never provides that function by default. I've searched stackoverflow for a long time to find the solution, but was unable to do so.
Fetch data from server with 'extraProperty' like columnattr, which will contain information to merge rowspan or not. So you have to update your server code according to your requirement(just add column).
In colmodel add attribute 'cellattr' for particular column and assign your function which will decide to have rowspan from server data 's extraProperty. This function allow you to customize cell in grid. so here you can merge row.
Ref: Jqgrid - grouping row level data
Cheerssssss.

DataTables - CSV Only Exports Current Rows

I have the following code
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "/functions/ajax.asp",
"ordering": false,
"bFilter": false,
"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
</script>
I have around hundreds of rows but when I select the an option such as CSV, it only exports what is on the screen.
Any ideas?
Thanks
The problem here is that you're using server-side processing, so the client-side dataTables plugin only has access to the data on the screen to export! You'll have to make something custom to get this data from the server.
Check out this post for a quick example: Server side excel export with DataTable
That is expected behavior for the export buttons in DataTables. They always simply export the data that is currently displayed on the screen. If you want to allow the user to export all data (and don't want to write a custom export function - if you do, see #Adam's answer), consider adding a lengthMenu option to your DataTable. This will allow users to change the number of records displayed per page, which can in turn let them show/export all records. The syntax for the lengthMenu parameter is as follows.
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
The first array shows the number of records to display for each option (in this case, 10, 25, 50, and all (-1 is all)), and the second array is what should be displayed in the user's dropdown menu.
See this stack overflow question for more detail on the topic.

Refresh the DataTable plugin table in jquery

I used the Data Tables.
DataTables is a plug-in for the jQuery Javascript library.
I upload a set of files.that upload files are stored in a array.
I displayed that array value using in table format using the DataTables plugin. Then I delete some upload files. So now I have updated array. Now I want to refresh the Table and display the new array in the table format. Is there any option to refresh the table in the dataTable plugin or any other way is available or not.
Re-Initialization is the solution what you can have as alternate for your kind of functionality,i.e.,
For every update of your files and array clear() existing data, and destroy() dataTable and Initialize it with updated array dataset.
var table = $('#example').DataTable();
after updation of array
lets assume variable "updatedArray" is having updated values.then call
table.clear();
table.destroy();
now initialize
table = $('#example').DataTable({
"data": updatedArray,
"columns": columnArray
});

jqGrid: Sorting local data clears grid

I've found similar but not identical questions on here; none of their posted answers solve this.
I have local data loaded using addJSONData. When you click a column header to sort, the grid is wiped. There are no errors in the web console/firebug. Data added by later calls to addJSONData is sorted by the selected column, at least.
My config:
jQuery('#attributes').jqGrid({
sortable:true,
datatype:"local",
colNames: cols,
colModel: colmods,
cmTemplate: {width:155, align:"left"},
multiselct: false,
shrinkToFit:false,
caption: "Node Attributes",
scroll: true,
footerrow: true,
userDataOnFooter: true,
rowNum: -1
});
My only idea is to save the data onSortCol and reload it in loadComplete. I don't much like that though. I've tried various combinations of rowNum: 9007199254740992, loadonce: true and others.
I've tried jqGrid versions 4.2.0 and 4.4.0 (in which rowNum: -1 is supported again).
Edit: The line that clears the data is the emptyRows bit in the sortData function:
if(ts.p.scroll) {
var sscroll = ts.grid.bDiv.scrollLeft;
emptyRows.call(ts, true, false);
ts.grid.hDiv.scrollLeft = sscroll;
}
Seems like the data should be saved before this happens, but I'm not familiar with this code to know where the data actually lives.
I'm newcomer to jqGRid (I only started to use it 3 days ago...) but, if you are using local, don't you also have to specify loadonce:true for sorting and paging to work?
I had a similar issue. I stumbled onto a fix though. After setting loadonce: true, if you hit the refresh button in the pager and then try to sort, it works fine.
So I force a click on the refresh button by doing something like: $(".ui-icon-refresh").trigger('click');
I ran this on the onClose event because that suited my requirements. You can check out my entire explanation on this issue here: Make 'Search' remote and everything else (sorting, pagination, etc) local in jqGrid

Multiple datatables per page

I have multiple data tables per page, ranging from 4 to 8 ish.
All the tables have different settings. All the data is gotten via sAjaxSource (a javascript array).
My question boils down to:
Solution 1)
Should I have one seperate URL for each table? This seems to work, but means a full page load takes a lot longer.
Solution 2)
Have one same link for all the tables (and have seperate array name), so its only 1 download.
My questions are as follows:
Is there any recommmended solution for multiple data tables per page, that's best practice in terms of 1 or multiple links to get the javascript arrays.
If you provide the same ajax link to multiple datatables the browser seems to download them once per table instead of 1 time for all tables. Is this per "design" or a fault in my code?
Side note: I have checked http://www.datatables.net/examples/basic_init/multiple_tables.html and search the documentation but did not learn anything about the above questions.
In the case you described above, I would not rely on browser cashing, instead I would get data with my own single Ajax request. Store it in a local variable and for different tables use 'aaData' option.
var mydata;
$.ready(function(){
$.get("source/file.php", function(data){
mydata = data;
$('#table1').dataTable({ "aaData": mydata[0] });
$('#table1').dataTable({ "aaData": mydata[1] });
}, 'json');
});
but in the end solution depends on your needs, maybe you'll need lots of data, maybe it ll require paging and would be better off with multiple 'source' files with differed loading options etc.
The fact that the browser download the file only the first time when you provide the same link is, I think, due to the browser caching capabilities and has nothing to do with DataTables or your code. The browser put the content in its cache the first time and then serves it from there.
You can use this fact to your advantage by using the sAjaxDataProp option. I'm thinking something along these lines :
$('#table1').dataTable( {
"sAjaxSource": "sources/data.txt",
"sAjaxDataProp": "table1"
} );
$('#table2').dataTable( {
"sAjaxSource": "sources/data.txt",
"sAjaxDataProp": "table2"
} );
[ ... ]
$('#tableN').dataTable( {
"sAjaxSource": "sources/data.txt",
"sAjaxDataProp": "tableN"
} );
This will tell DataTable to look for a specific javascript array in the loaded content. Obviously, the data.txt file must contain the declaration of each table.
If you want to be sure that the browser do only one request, you could also load the data by an other means, a jQuery AJAX function for example, and then initialize the DataTables with an javascript array :
$('#table1').dataTable( { "aaData": array1 } );
$('#table2').dataTable( { "aaData": array2 } );
$('#tableN').dataTable( { "aaData": arrayN } );
I hope this will help :)

Categories