datatables-dynamic-columns

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Datatable with dynamic headers</title>
<link rel="stylesheet" type="text/css" href="datatables.min.css">
<script src="datatables.min.js"></script>
</head>
<body>
<h2>Skygate front-end LAB Datatable example with dynamic headers</h2>
<table id="demotable" class="table table-striped table-condensed dataTable">
<thead><tr></tr></thead>
</table>
<script>
var data,
tableName= '#demotable',
columns,
str,
jqxhr = $.ajax('data/data.json')
.done(function () {
data = JSON.parse(jqxhr.responseText);
// Iterate each column and print table headers for Datatables
$.each(data.columns, function (k, colObj) {
str = '<th>' + colObj.name + '</th>';
$(str).appendTo(tableName+'>thead>tr');
});
// Add some Render transformations to Columns
// Not a good practice to add any of this in API/ Json side
data.columns[0].render = function (data, type, row) {
return '<h4>' + data + '</h4>';
}
// Debug? console.log(data.columns[0]);
$(tableName).dataTable({
"data": data.data,
"columns": data.columns,
"fnInitComplete": function () {
// Event handler to be fired when rendering is complete (Turn off Loading gif for example)
console.log('Datatable rendering complete');
}
});
})
.fail(function (jqXHR, exception) {
var msg = '';
if (jqXHR.status === 0) {
msg = 'Not connect.\n Verify Network.';
} else if (jqXHR.status == 404) {
msg = 'Requested page not found. [404]';
} else if (jqXHR.status == 500) {
msg = 'Internal Server Error [500].';
} else if (exception === 'parsererror') {
msg = 'Requested JSON parse failed.';
} else if (exception === 'timeout') {
msg = 'Time out error.';
} else if (exception === 'abort') {
msg = 'Ajax request aborted.';
} else {
msg = 'Uncaught Error.\n' + jqXHR.responseText;
}
console.log(msg);
});
</script>
<div style="margin-top:12em;width:100%;height: auto;background-color: lightgrey; color:#FFF">Authors:
<a style="color:#FFF" href="http://fasani.de">Martin Fasani</a>, Diego Guza
Based on <a style="color:midnightblue" href="http://datatables.net">datatables jQuery plugin</a>
</div>
</body>
</html> Nguồn:  martinberlin/datatables-dynamic-columns

Comments

Post a Comment

Popular posts from this blog

Data Import Best Practices in Power BI

Image
  When you create a data model in Power BI, you should consider how to properly use naming convention and what columns to include, in order to improve usability and performance. This article provides a quick list of best practices valid for both Power BI and Power Pivot. APR 5, 2018 UPDATED Marco Russo DAX     POWER BI     POWER PIVOT     TABULAR    Not all of the suggestions described can be applied to all of your data models. You should adapt these best practices to your specific scenario, looking at how to achieve the goals that are the reason for a certain pattern more than barely apply it without considering the pros and cons of each choice. Even if the article mentions Power BI, all the best practices described are valid for Power Pivot and Analysis Services Tabular models, too. The demo file you can download (at the end of the article) contains a sample Power BI file and the corresponding views defined in a SQL file for ...
Read more

ASP.NET MVC + AdminLTE

Image
  ASP.NET MVC + AdminLTE March 31, 2018 00:14 ASP.NET MVC + AdminLTE ( edit ) ASP.NET MVC Application with a Custom Layout ( Login screen ) https://code.msdn.microsoft.com/ASPNET-MVC-Application-b4b0dc3f A NuGet package for integrating Admin LTE 2.0.4 into ASP.Net MVC 5 https://github.com/eralston/AdminLteMvc  (AdminLTE version 2.0.4) ASP.NET  Example Version of Beautiful AdminLTE Template https://github.com/go2ismail/AdminLTE-ASP-NET-MVC  (AdminLTE version 2.4.0) Tutorials & Samples on adding Charts into ASP.NET MVC Applications https://canvasjs.com/docs/charts/integration/asp-net-mvc-charts/  (Chart) CRUD Operations in ASP.NET MVC Using AJAX and Bootstrap https://dzone.com/articles/crud-operation-in-aspnet-mvc-using-ajax-and-bootst AdminLTE +  ASP.NET MVC 5 + Net Framework 4.8 https://github.com/DiomedesDominguez/AdminLTE.NET ASP.NET MVC 5 Scaffolding https://github.com/robinli/MVC5-Scaffolder ASP.NET MVC 5 SmartCode Scaffolding ( HAY HAY HA...
Read more

Build your first Azure Dara Factory Pipeline

Image
Overview We're going to build a pipeline using the Copy Data tool. This tool makes it easier for people starting out with ADF to create their first pipelines. Before we start, we need to make sure some prerequisites are met. Prerequisites If you haven't already, follow the steps of the  previous part of the tutorial  to set up ADF, a storage account with a blob container and an Azure SQL DB. In the Azure Portal, go to your storage account and then to the "data-input" container we created. Click on the  Upload  link. A pane will open where you can select a local file. Upload the  Customers.csv  file, which you can  download here . Click  Upload  to put the file in the blob container. Create the Pipeline Go to ADF Studio and click on the  Ingest  tile. This will open the  Copy Data tool . In the first step, we can choose to simply copy data from one location to another, or to create a more dynamic, metadata-driven task. We'll cho...
Read more