To activate click on cell you must use a delegated event handler – this will work on any dataTable : $(‘.dataTable’).on(‘click’, ‘tbody td’, function() { //get textContent of the TD console.log(‘TD cell textContent : ‘, this.textContent) //get the value of the TD using the API console.log(‘value by API : ‘, table.cell({ row: this.parentNode.rowIndex, column : … Read more
Check whether you have added <thead></thead> <tbody></tbody> I’ve resolved this problem by adding those. So basically the structure must be like: <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> </table>
Date Sort – with a hidden element Convert the date to the format YYYYMMDD and prepend to the actual value (MM/DD/YYYY) in the <td>, wrap it in an element, set style display:none; to the elements. Now the date sort will work as a normal sort. The same can be applied to date-time sort. HTML <table … Read more
Try adding “bDestroy”: true to the options object literal, e.g. $(‘#dataTable’).dataTable({ … …. “bDestroy”: true }); Source: iodocs.com or Remove the first: $(document).ready(function() { $(‘#example’).dataTable(); } ); In your case is the best option vjk.
The simplest way I can think of accomplishing this with vanilla Javascript would be a modified depth first traversal of an object: function renderJSON(json) { const wrapper = document.createElement(‘div’); const stack = [{ node: json, name: ‘root’, parentEl: wrapper }]; while (stack.length > 0) { let current = stack.pop(); let currentObj = current.node; let currentParentEl … Read more
These few lines are all you need to get it working. You don’t need the prerender event. Just bind in Page_Load in the IsPostBack check. I did add a RowDataBound event to the GridView to add the <thead> and <tbody> sections programatically rather than with jQuery. <script type=”text/javascript” src=”https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js”></script> <link type=”text/css” rel=”stylesheet” href=”https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css” /> <asp:GridView … Read more
In modern browsers, you can prompt a download by creating a Blob with your file contents (in your case received by Ajax), creating a URL for it, and using the download attribute: const saveData = (function () { const a = document.createElement(“a”); document.body.appendChild(a); a.style = “display: none”; return function (data, fileName) { const blob = … Read more
You can iterate over the row data $(‘#button’).click(function () { var ids = $.map(table.rows(‘.selected’).data(), function (item) { return item[0] }); console.log(ids) alert(table.rows(‘.selected’).data().length + ‘ row(s) selected’); }); Demo: Fiddle
For DataTables >=1.10, use: $(‘table’).dataTable({searching: false, paging: false, info: false}); If you still want to be able to use the .search() function of this plugin, you will need to hide the search bar’s html with the dom setting: $(‘table’).dataTable({dom: ‘lrt’}); The defaults are lfrtip or <“H”lfr>t<“F”ip> (when jQueryUI is true), f char represents the filter … Read more
I would have to suggest the highlight plugin 🙂 I’m using this in about the same scenario right now, it’s given me no issues thus far. The usage is pretty simple: $(“#myTable”).highlight($(“#searchBox”).val()); Just put the highlight CSS class in your stylesheet styles like you want and that’s it: .highlight { background-color: yellow }