Search
18952 results 581-590
Forum
- 19th Sep 2018How can I create Expand/Collapse Row button in TypeScript/Angular 6?I saw that tutorial but I integrated it differently in Typescript. <div class="container"> <h1>Clients</h1> <h3>Compliance Report</h3> <table class="table table-hover" cellspacing="0"> <thead> <tr> <th></th> <th>Client - Member</th> <th>Fund Name</th> <th>Issuer</th> <th>Holding</th> </tr> </thead> <tbody> <tr *ngFor="let client of clients"> <td class="details-control" id="detail-btn" (click)="changeDetail()" orderable="false"></td> <td>{{client.firstName}}</td> <td>{{client.lastName}}</td> <td>{{client.company}}</td> <td><input type="checkbox"></td> </tr> </tbody> </table> </div> If I already have my columns built how can I dynamically edit the first one to have the same properties as the first column given in the example? $(document).ready(function() { var table = $('#example').DataTable( { "ajax": "../ajax/data/objects.txt", "columns": [ { "className": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "salary" } ], "order": [[1, 'asc']] } ); If you were wondering, here is my full implementation. ngOnInit() { this.http.get('https://5a5a9e00bc6e340012a03796.mockapi.io/clients') .subscribe((data: any[]) => { this.clients = data; this.chRef.detectChanges(); // Now you can use jQuery DataTables : const table: any = $('table'); this.dt = table.DataTable({ }); }); } format () { // `d` is the original data object for the row return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' + '<tr>' + '<td>Full name:</td>' + '<td>Details row!</td>' + '</tr>' + '</table>'; } changeDetail () { const tr = $('#detail-btn'); const row = this.dt.row( tr ); if ( row.child.isShown() ) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); } else { // Open this row row.child( this.format()); tr.addClass('shown'); } } }
- 9th Sep 2018I Tried to generate buttons in react but i can't please help me to create export buttons in reactHi @MAHESH54 , Take a look at this example here, you probably just need the dom defined. Cheers, Colin
- 3rd Sep 2018Create and Remove buttons not workgin.One different - is that i call DataTables JS code inside VueJS app mounted() function. Is that usable for any suggestions?
- 24th Aug 2018I need to create a datatable with a JSON web URL in a javascript codethanks, you r right, i change the "ajax" : "data" for "data" : "data" and put the request inside the datatable. <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script> <title>Prueba datatable</title> <script> $(document).ready(function(){ $.getJSON( "http://jsonplaceholder.typicode.com/posts", function( data ) { $('#data-table').DataTable({ "data" : data, columns : [ {"data" : "userId"}, {"data" : "id"}, {"data" : "title"}, {"data" : "body"} ] }); }); }); </script> </head> <body> <table id="data-table" class="table table-bordered" width="100%"> <thead> <tr> <th>userId</th> <th>id</th> <th>title</th> <th>body</th> </tr> </thead> </table> </body> </html> thanks a lot.
- 2nd Aug 2018How can I create a select list with an option for free text when option is not in list?Thanks, that was the easiest solution I could think of! So for others looking for the same thing: I added the select2 plugin, select2 library and css as described in the link provided by Kevin. After that I added the 'tag' option to the select2 type. See example below: { "label": "Soort:", "name": "soort", "type": "select2", "opts": { "tags": true } , "options": [ "Option 1", "Option 2", "etc" ] },
- 30th May 2018Create Custom InfoFilter at Top of TableHi @bocahapi , This is likely to have something to do with your Ajax response. It would be worth comparing your requests and responses with the Ajax tab on this example. We're happy to take a look if you could provide a test case or link to your page. Cheers, Colin
- 16th May 2018How can we create a link in a data table which is generated from a HTML sourced data?Hi @gopuvenkat , I'm sorry, I don't understand by a "link in each cell corresponding to the Name column" - how would this look in the table? If you want to change the look of a column's data, then you can use columns.render - there's examples there on that page on how to do that. One thing, the cells under <tbody> should be <td>, not `'. Cheers, Colin
- 29th Apr 2018Create margins / padding on cells.Got it working thanks.
- 17th Apr 2018How can I create a button when using JQ UI styling.I've added a line to my style sheet .dt-buttons { display: inline-block; } and this has cured it. I don't know whether out global settings in out css (shown below) are the cause of the problem. html { box-sizing :border-box; } /* *, *:before, *:after {*/ * { box-sizing :inherit; } /* Set a default for all divs Then just amend where required. */ div[id^=div] { margin :0px; overflow :hidden; padding :0px; vertical-align :top; } Thank you for the feedback. Just like to say the use of DataTables has really improved the look/feel of our intranet. Users are impressed and it's been well worth the time/effort for me to get to understand how to use them (and lots more still to learn I :D ).
- 15th Mar 2018Is there a way to create (handle) expandable / collapsible editor form..This example shows fields being dynamically shown and hidden. Allan