I am using ember-datatables addon which is based on jquery Datatables. I have created one datatables as per their guidelines.
But I am chaning the data of table after some time and redrawing the table. Redrawing table do not delete previous data.
Here is Ember twiddle created by me. Also I am adding code below.
templates/application.hbs
<h1>Please find data table below</h1>
{{outlet}}
{{#data-table id="myTable"}}
<thead>
<tr>
<th>Name</th>
<th>Salary</th>
<th>Position</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Salary</th>
<th>Position</th>
</tr>
</tfoot>
<tbody>
{{#each data1 as |data|}}
<tr>
<td>{{data.name}}</td>
<td>{{data.salary}}</td>
<td>{{data.position}}</td>
</tr>
{{/each}}
</tbody>
{{/data-table}}
routes/application.js
import Ember from 'ember';
export default Ember.Route.extend({
setupController: function() {
Ember.run.later(this, function() {
this.controller.set('data1', [{
'name': 'John Smith 1',
'salary': '$2000',
'position': 'developer'
}, {
'name': 'Alex 1',
'salary': '$2000',
'position': 'developer'
}, {
'name': 'Leonardo 1',
'salary': '$2000',
'position': 'developer'
}]);
var api = new $.fn.dataTable.Api('#myTable');
api.row.clear();
api.draw();
}, 5000);
}
});
controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
data1: [{
'name': 'John Smith',
'salary': '$2000',
'position': 'developer'
}, {
'name': 'Alex',
'salary': '$2000',
'position': 'developer'
}, {
'name': 'Leonardo',
'salary': '$2000',
'position': 'developer'
}]
});
You are getting TypeError: api.row.clear is not a function.
Changing from api.row.clear() to api.clear() is fixing your issue.
Consider avoiding this addon like mentioned in comments.
Related
I am able to put a button inside each row of data tables but the button doesn't have any function, and I didn't know how to add delete event to that button. can someone help me? hope you give me the demo too ;)
*ps: also, how to put background-color on print, export button. className : red(on TS) and .red{ background-color : red;}(on CSS) didn't work out :/
*another ps : i'm using datatables.net
TS File
products: any = (data as any).default;
ngOnInit(): void {
this.dtOptions = {
ajax: {
url: '',
type: 'GET',
dataType: 'json',
},
columns: [
{
title: 'ID',
data: 'id',
},
{
title: 'Name',
data: 'name',
},
{
title: 'Gender',
data: 'gender',
},
{
title: 'Option',
data: null,
defaultContent:
'<button class="btn-delete type="button">Delete</button>',
targets: -1,
},
],
dom: 'Bfrtip',
buttons: [
{ extend: 'excel', text: 'Export' },
{
text: '<i class="fa fa-files-o"></i>',
action: function (e, dt, node, config) {
dt.ajax.reload();
},
},
{
extend: 'print',
text: 'Print',
},
],
};
}
html
<table
datatable
[dtOptions]="dtOptions"
class="mc row-border hover">
</table>
You can check this Demo
you need to rerender after delete process. You can add button like below and give function to it.
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
<thead>
<tr>
<th>ID</th>
<th>First name</th>
<th>Last name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let person of persons">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td><button class="btn-delete" (click)="deleterow(person)">Remove</button> </td>
</tr>
<tr *ngIf="persons?.length == 0">
<td colspan="4" class="no-data-available">No data!</td>
</tr>
</tbody>
</table>
in component you need rerender function
deleterow(person){
console.log(person);
//here do delete event
const that = this;
this.rerender()
}
rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.destroy();
this.dtTrigger.next();
});
}
and change your afterinit with
ngAfterViewInit(): void {
this.dtTrigger.next();
}
How do I stop default sorting inside the ng-repeat for dynamic table data ?
Currently I am getting below order:
Addr | CustomerId | Name
but what I want is below ordering:
CustomerId | Name | Addr
Any Help would me much appreciated.
JS:
app.controller('MyController', function ($scope) {
$scope.Customers = [
{ CustomerId: 1, Name: "John Hammond", Addr:'India'
},
{
CustomerId: 2, Name: "Mudassar Khan", Addr:'India'
},
{
CustomerId: 3, Name: "Suzanne Mathews", Addr:'India'
},
{
CustomerId: 4, Name: "Robert Schidner", Addr: 'India'
}
];
});
HTML:
<table>
<tr >
<th ng-repeat="(key,value) in Customers[0]">{{key}}</th>
</tr>
<tbody ng-repeat="c in Customers">
<tr>
</tr>
</tbody>
</table>
Try this below way. I hope this below snippet result is showing what you want.
angular.module("aaa",[]).controller('MyController', function ($scope) {
$scope.Customers = [
{ CustomerId: 1, Name: "John Hammond", Addr:'India'
},
{
CustomerId: 2, Name: "Mudassar Khan", Addr:'India'
},
{
CustomerId: 3, Name: "Suzanne Mathews", Addr:'India'
},
{
CustomerId: 4, Name: "Robert Schidner", Addr: 'India'
}
];
$scope.keys = Object.keys($scope.Customers[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="aaa" ng-controller="MyController">
<table>
<tr>
<th ng-repeat="key in keys">
{{key}}
</th>
</tr>
<tbody ng-repeat="c in Customers">
<tr>
<td ng-repeat="key in keys">{{c[key]}}</td>
</tr>
</tbody>
</table>
</div>
So objects in JS are inherently unordered. What you can do is just hard code the keys in the header if that will be fixed for that particular table and then print the values in the respective order.
Something like this:
<table>
<tr >
<th>CustomerId</th>
<th>Name</th>
<th>Addr</th>
</tr>
<tbody>
<tr ng-repeat="c in Customers">
<td>{{CustomerId}}</td>
<td>{{Name}}</td>
<td>{{c.Addr}}</td>
</tr>
</tbody>
</table>
Note: I put the ng-repeat on the tr which is probably what you need. I dont think you should put it on the tbody.
Do you mean the sort order of the data or the display order of the columns?
The accepted answer displays the data by the order of the columns as specified, but if you want the data itself sorted then just add a filter to the data like this:
<tbody ng-repeat="c in Customers|orderBy:['CustomerId','Name','Addr']">
This sorts the actual data in the list by the fields specified.
Okay, so I'm having hard time understanding how ng-repeat builds tables. What I'm trying to do is that per row, there is customer name and address. I can't get it to work. Here is my HTML code:
<table class="table table-striped" ng-controller="myController">
<thead>
<tr>
<th>Company Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="company in fieldData" row-id="{{ company.name }}">
<td>{{ company.name }}</td><td>{{ company.address }}</td>
</tr>
</tbody>
</table>
and here is my script:
var companyName = [];
var companyAddress = [];
$scope.fieldData = [];
$(data).find('record').each(function () {
companyName.push($(this).record(6));
companyAddress.push($(this).record(47));
});
$scope.fieldData.push({
name: companyName,
address: companyAddress
})
So, in companyName and companyAddress arrays, there are name and addresses being stored. But I can't get one company & address per row. Any ideas?
You built an one element array with one object of two arrays, like:
fieldData: [
{
name: [
'name1', 'name2', 'etc'
],
address: [
'addr1', 'addr2', 'etc'
]
}
]
You want to have an array of objects with name and address fields:
fieldData: [
{
name: 'name1',
address: 'addr1'
},
{
name: 'name2',
address: 'addr2'
},
{
name: 'etc',
address: 'etc'
}
]
To achieve that, go with:
$scope.fieldData = [];
$(data).find('record').each(function (item) {
$scope.fieldData.push({
name: item.record(6),
address: item.record(47)
});
});
I have problem with datable server side after columns Filter or pagination. Firstly, after reload page - all fine, data get correctly. But after then i sorting or filtering columns, request url return error.
Here is my jquery:
var customer_id = $('input[name=customer-id]').val();
// Data tables
$('#customers-list-data').DataTable({
processing: true,
serverSide: true,
ajax: '/customers/edit/'+customer_id,
columns: [
{ data: 'first_name', name: 'first_name' },
{ data: 'last_name', name: 'last_name' },
{ data: 'phone', name: 'phone' },
{ data: 'country', name: 'country' },
{ data: 'city', name: 'city' },
{ data: 'address', name: 'address' },
{ data: 'email', name: 'email' },
{ data: 'action', name: 'action', orderable: false, searchable: false}
],
pagingType: 'full_numbers',
dom: '<"dt-top-row"Bfl>r<"dt-wrapper"t><"dt-row dt-bottom-row"<"row"<"col-sm-6"i><"col-sm-6 text-right"p>>>',
buttons: [
{
extend: 'collection',
text: 'Save <span class="caret" />',
buttons : ['csvFlash', 'excelFlash', 'pdfFlash']
},
'colvis'
]
});
$('#customers-list-data').dataTable().columnFilter({
sPlaceHolder: "head:after",
aoColumns: [
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
null
]
});
And this is method on laravel project:
public function getEdit(Request $request, Customer $customer)
{
if($request->ajax()) {
$customer_data = $customer->Data()->get();
return Datatables::of($customer_data)
->addColumn('action', function ($customer_data) {
return '<div class="btn-group">
<i class="fa fa-edit"></i>
<i class="fa fa-times"></i>
</div>';
})
->make(true);
}
}
First time request url :
http://address.com/customers/edit/39?draw=1&columns%5B0%5D%5Bdata%5D=first_name&columns%5B0%5D%5Bname%5D=first_name ...
After filtering or sorting, pagination:
http://address.com/customers/edit/39?draw=2&columns=%5Bobject+Object%5D%2C%5Bobject+Object%5D%2C%5Bobject+Object%5D%2C%5Bobject+Object%5D%2C%5Bobject+Object%5D%2C%5Bobject+Object%5D%2C%5Bobject+Object%5D%2C%5Bobject+Object%5D&order=%5Bobject+Object%5D&start=10&length=10&search=%5Bobject+Object%5D&sRangeSeparator=~
Laravel debug error:
in Request.php line 78
at HandleExceptions->handleError('2', 'Illegal string offset 'column'', '/var/www/dev/vendor/yajra/laravel-datatables-oracle/src/yajra/Datatables/Request.php', '78', array('orderable' => array(), 'i' => '0', 'c' => '1')) in Request.php line 78
Here is my table:
<table id="customers-list-data" class="table table-striped table-bordered table-hover customers-table-list">
<thead>
<tr class="second">
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Country</th>
<th>City</th>
<th>Address</th>
<th>Email</th>
<th> </th>
</tr>
<tr>
<th style="width: 11%;">First Name</th>
<th style="width: 11%;">Last Name</th>
<th style="width: 11%;">Phone</th>
<th style="width: 11%;">Country</th>
<th style="width: 11%;">City</th>
<th style="width: 11%;">Address</th>
<th style="width: 11%;">Email</th>
<th class="no-sort" style="width: 13%;">Actions</th>
</tr>
</thead>
</table>
I using libraries:
Laravel
http://datatables.yajrabox.com/
JS
http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js
http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js
I think its a bug of these versions, because with older datatable version is good.
I am trying to display table data within Angular framework
In my html
<table class='table'>
<tr>
<th ng-repeat='test in tests'>{{test.name}}</th> // it shows correctly...
</tr>
<tr ng-repeat=''> //not sure what to do here...
<td>Item</td><td>Item</td><td>Item</td><td>Item</td>
</tr>
</table>
controller
.controller('BoxCtrl', ['$scope', function ($scope) {
$scope.tests = [
{'name':'header1',
'items':
[
{'name':'Item 1', 'link':'1'},
{'name':'Item 2', 'link':'2'},
{'name':'Item 3', 'link':'3'}
]
},
{'name':'header2',
'items':
[
{'name':'Item 1', 'link':'i1'},
{'name':'Item 2', 'link':'i2'}
]
},
{'name':'header3',
'items':
[
{'name':'Item 1', 'link':'i1'},
{'name':'Item 2', 'link':'i2'}
]
},
{'name':'header4',
'items':
[
{'name':'Item 1', 'link':'I1'},
{'name':'Item 2', 'link':'I2'},
{'name':'Item 3', 'link':'I3'}
]
}
];
}]);
I have no problem display data in TH but not sure how to apply hg-repeat in the tr and td. Can anyone give me a hint for this? Thanks a lot!
You can do something like this:
Example:
<div ng-app="App" ng-controller="ctrl" >
<table class='table'>
<tr>
<th ng-repeat='test in tests'>{{test.name}}</th>
</tr>
<tr ng-repeat='itemsColl in tests'>
<td ng-repeat="item in itemsColl.itemsRow">{{item.name}}</td>
</tr>
</table>
</div>
live Example: http://jsfiddle.net/choroshin/4mD86/
also in this stackoverflow answer you can find more information on dynamic table creation