Search
19065 results 581-590
Forum
- 20th Dec 2018How To Create Space Between Search Box & Table?Hi @nordike , This thread here may be interesting, it shows how to move table elements to other locations. The other option is to do something in the CSS, like this here. Cheers, Colin
- 21st Nov 2018Create test case for editorI wanted to use the example with jQueryUI I will try to use this one and add jQueryUI in it Thanks
- 9th Oct 2018How do I create a link for a previous search?Hi @ancredigital , This blog post here should get you started - there's some examples on that page. Cheers, Colin
- 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