jQuery UI Widgets Forums DataTable How to apply datatable style to my table

This topic contains 2 replies, has 2 voices, and was last updated by  Dimitar 8 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • John

    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”>
    <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 = “”;
    } else {
    alert(“This browser does not support HTML5.”);
    //} else {
    // alert(“Please upload a valid CSV file.”);

    <td>Select File</td>
    <td><input id=”fileUpload” type=”file” accept=”.csv” /></td>
    <input id=”btnloaddata” type=”button” value=”Load Data” onclick=”Upload_file()” />

    <div id=”div_bind”>


    Data Easily Converting from CSV to HTML table
    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,

    jQWidgets team

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.