JSFiddle - React, Tailwind, and code Playground

by emepyc

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<table id="dtData"></table>

JavaScript

$('#dtData').dataTable( {
                "data": [
                    ["A", "<div id=mydiv0></div>"],
                    ["B", "<div id=mydiv1></div>"],
                    ["D", "<div id=mydiv2></div>"],
                    ["E", "<div id=mydiv3></div>"],
                    ["F", "<div id=mydiv4></div>"],
                    ["G", "<div id=mydiv5></div>"],
                    ["H", "<div id=mydiv6></div>"],
                    ["I", "<div id=mydiv7></div>"],
                    ["J", "<div id=mydiv8></div>"],
                    ["K", "<div id=mydiv9></div>"],
                    ["L", "<div id=mydiv10></div>"]
                    ],
                 "columns": [
                    { "title": "Label" },
                    { "title": "Rendered"}
                ],
                "fnDrawCallback" : function (settings) {
                    for (var i=settings._iDisplayStart; i<settings._iDisplayStart + settings._iDisplayLength; i++) {
                        $("#mydiv" + i).text("Hello");
                    }
                },
                "paging": true,
                "searching": true,
                "ordering": false
            } );