JSFiddle - React, Tailwind, and code Playground

by pratik24

HTML

<body id="dt_example">
<div id="container">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<ul>
    <li> <a href="addedit.jsp">Add Code Edit</a></li>
    <li> <a href="#">Import</a></li>
    <li> <a href="#">Export</a></li>
</ul>
<tr>
    <th>Identifier</th>
    <th>Label</th>
    <th>Categories</th>
    <th>UpdatedBy</th>
    <th>UpdatedAt</th>
    <th></th>
    <th></th>
    <th></th>
</tr>
</thead>

<tbody>
<tr>
    <td>Row 1 Data 1</td>
    <td>Row 1 Data 2</td>
    <td>Row 1 Data 3</td>
    <td>Row 1 Data 4</td>
    <td>Row 1 Data 5</td>
    <td class="getimage"><a href="addedit.jsp"></a></td>
    <td class="editimage"></td>
    <td class="deleteimage"></td>
</tr>
</tbody>
</table>
</div>
<script src="ceditdata.js"></script>


<div id="populateDT"> <%= session.getAttribute("getData")%> </div>



</body>

JavaScript

$(document).ready(function(){
    var myObject=document.getElementById("populateDT").innerHTML;
    alert(myObject);
    
    $('#example').dataTable
        ( 
            {
                "sScrollY": "500px",
                "bPaginate": false,
                "bScrollCollapse": true,
                aaData:myObject,

                "aoColumns":
                    [
                        { "mData": "Identifier"},
                        { "mData": "Label"},
                        { "mData": "Categories"},
                        { "mData": "UpdatedBy"},
                        { "mData": "UpdatedAt"},
                        { "sClass": "getimage", "mData":""},
                        { "sClass": "editimage", "mData":""},
                        { "sClass": "deleteimage", "mData":""}
                    ]
            } );
    });