jQuery UI Widgets › Forums › DataTable › How to apply datatable style to my table
Tagged: Angular Data Table, class, css, data table, html table, jquery data table, jqxdatatable, jqxgrid, style
This topic contains 2 replies, has 2 voices, and was last updated by Dimitar 9 years, 3 months ago.
-
Author
-
Hai , I have a table already it is generating when button click is activated .. i want to apply jqwidget datatable style to my created table..my table name is ‘table’ i kept it in div with id divTb
I am creating table from one csv file using this code
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script type=”text/javascript” src=”libs/jquery.slimscroll.min.js”></script><script type=”text/javascript”>
function Upload_file() {
var fileUpload = document.getElementById(“fileUpload”);
//var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
//if (regex.test(fileUpload.value.toLowerCase())) {
if (typeof (FileReader) != “undefined”) {
var reader = new FileReader();
reader.onload = function (e) {
var table = document.createElement(“table”);
var rows = e.target.result.split(“\n”);
for (var i = 0; i < rows.length; i++) {
var row = table.insertRow(-1);
if (i == 0) {
var cells = (rows[i] + “,new_column1” + “,new_column2”).split(“,”);
}
else {
var cells = rows[i].split(“,”);
}for (var j = 0; j < cells.length; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = cells[j];
}
}
var div_bind = document.getElementById(“div_bind”);
div_bind.innerHTML = “”;
div_bind.appendChild(table);
}
reader.readAsText(fileUpload.files[0]);
} else {
alert(“This browser does not support HTML5.”);
}
//} else {
// alert(“Please upload a valid CSV file.”);
//}
}</script>
</head>
<body>
<table>
<tr>
<td>Select File</td>
<td><input id=”fileUpload” type=”file” accept=”.csv” /></td>
<td>
<input id=”btnloaddata” type=”button” value=”Load Data” onclick=”Upload_file()” /></td>
</tr>
<tr></tr>
</table>
<div id=”div_bind”></div>
</body>
</html>Data Easily Converting from CSV to HTML table
But
I need to apply Jqwidget Datatable Display Style to my created table.Hi John,
You can initialize a jqxDataTable widget directly from your table, as shown in the demo Default Functionality. Alternatively, you can see what classes are applied to the various elements of the data table in the Styling and Appearance page and add these classes to the elements of your table. You may also take a look at the jqxDataAdapter demos.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.