• Hi All

    Please note that at the Chandoo.org Forums there is Zero Tolerance to Spam

    Post Spam and you Will Be Deleted as a User

    Hui...

  • When starting a new post, to receive a quicker and more targeted answer, Please include a sample file in the initial post.

Excel Table to Responsive HTML using JSON, AJAX, DataTables

@Chihiro
Thank you for your reply.

I copy & pasted your code, except

-removed footer because I did not need it
-JSONfile is JSonTest.txt

HTML: 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
    <style type="text/css" class="init">

    </style>
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.3.js">
    </script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
    </script>
    <script type="text/javascript" class="init">

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "JSonTest.txt"
    } );
} );

    </script>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Column4</th>
                <th>Column5</th>
                <th>Column6</th>
                <th>Column7</th>
                <th>Column8</th>
                <th>Column9</th>
                <th>Column10</th>
                <th>Column11</th>
                <th>Column12</th>
                <th>Column13</th>
                <th>Column14</th>
                <th>Column15</th>
            </tr>
        </thead>
    </table>
</body>
</html>
 
I assume JSON file is in same folder as HTML file.

Change this line "ajax": "JSonTest.txt" to "ajax": "\JSonTest.txt"
 
Oh forgot to mention that <thead> can only contain <th> tag equal to number of columns. In this case, 3. So leave Column 1 to 3 only and remove others.
 
@Chihiro
1. I matched the column number, but still same error...:confused:

2. Thank you for sharing the link.
After reading it,
I tried to validate my JSON using this online checker.
http://jsonlint.com/#

I do not understand what it means but will study it...
screenshot.PNG
 
Ah, that result tells me following.

1. "data:" should be "data":
2. remove "," from lines before closing "]".

So it will be something like.
Code: 
{
    "data": [
        [
            1,
            null,
            1
        ],
        [
            1,
            null,
            1
        ]
    ]
}
 
You must log in or register to reply here.
Back
Top