I tried using datatables plugin and it worked smoothly for my table. I have this one problem: when I try to refresh my function for getting the value from database using $interval every seconds, it destroys the whole table and I cant use the search and pagination because the whole table refreshes,
What I tried and doesn't work:
statesave();
destroy();
Here is my code for realtime update of data using datatables:
angular.module('selectExample', [])
.controller('ExampleController', ['$scope','$interval', function($scope,$interval) {
$interval(function () {
$scope.register = {
regData: {
branch: {},
},
names: [
{name:"narquois"},{name:"vorpal"},{name:"keen"},
{name:"argol"},{name:"long"},{name:"propolis"},
{name:"bees"},{name:"film"},{name:"dipsetic"},
{name:"thirsty"},{name:"opacity"},{name:"simplex"},
{name:"jurel"},{name:"coastal "},{name:"fish"},
{name:"kraken"},{name:"woman"},{name:"limp"},
],
};
}, 1000);
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript">
$(function() {
$('#example').DataTable({
pageLength: 10,
});
})
</script>
<div ng-app="selectExample" ng-controller="ExampleController">
<table id="example" width="100%">
<thead>
<tr align="center">
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in register.names">
<td align="center">{{ person.name }}</td>
</tr>
</tbody>
</table>
</div>
I wouldn't use that function if I were you believe me, it will consume a lot of memory just for a table. There are a lot of API for real-time table, use them.
Related
I am using a asp.net mvc web app. I have created a table and now I am wanting to use the plugin in datatables. I saw you only needed 3 lines of code to make this work. I attempted to do exactly what it required in order for it to work and give me the desired datatable, but it does not give me the table I am expecting. I even went to examples -> HTML (DOM) source data -> and under Javascript tab I entered the lines required.
Is there something I am doing incorrect here with the script tags or is the plug in just not working? I do not have the files downloaded and imported to my project.
Expecting a standard look like this
But am getting this... so I am missing the look of the datatable plugin and the following Error.
Cannot set properties of undefined (setting '_DT_CellIndex')
my view:
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>
Your problem is a mismatch in the number of <td> </td>. You are just rendering 1 <td> in foreach loop but you have two <th></th> in the table header
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
<td>
<a href=#url>#item.Option</a> /* output you Option value*/
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html> ```
I'm trying achieving a datatable like in laravel the yajra datatable, so I thought that I will try the jquery datatable all of them works, but it says no data available and whenever I search or sort it says no data available, even if the data is there. Anyways here is the code, I also added the picture so you would understand. Thank you in advance :)
Picture :
enter image description here
Client.js:
<table className="table table-striped" id="table">
<thead className="thead-dark">
<tr>
<th>Name</th>
<th>Address</th>
<th>Mobile</th>
<th>Email</th>
<th>Gender</th>
<th>Birthday</th>
<th>Facebook Page</th>
<th>Facebook Name</th>
<th>Existing</th>
<th>Remarks</th>
<th>Actions</th>
</tr>
</thead>
<tbody>{this.clientList()}</tbody>
</table>
my index.html :
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<script>
$(document).ready(function () {
$('#table').DataTable();
});
</script>
Solved it using this to do it:
import MUIDataTable from "mui-datatables";
const columns = [
{
name: "name",
label: "Name",
options: {
filter: true,
sort: true,
},
},
];
render() {
const { clients } = this.state;
<MUIDataTable data={clients} columns={columns} />
}
I have tried to display a table as a datatable. But the code for displaying that is in another PHP file, so that it is not displayed as datatable instead as a normal table. I have included all the script files also.
**activity_show.php**
<link href="vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
<table id="datatable-buttons" class="table table-striped table-bordered dataTable " role="grid"
aria-describedby="datatable-buttons_info" style="width: 948px;">
<thead>
<th>id</th>
<th>Date </th>
<th>id2</th>
</tr>
</thead>
<tbody>
<td>1</td>
<td >2</td>
<td>3</td>
</tr>
</tbody>
</table>
<script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="vendors/jszip/dist/jszip.min.js"></script>
<script src="vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="vendors/pdfmake/build/vfs_fonts.js"></script>
Using the below given code the table is called for displaying.
**activity.php**
<div class="row">
<div id="userTable"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
showactivity();
});
function showactivity(){
$.ajax({
url: 'activity_show.php',
type: 'POST',
async: false,
data:{
show: 1
},
success: function(response){
$('#userTable').html(response);
}
});
}
You can use these functions to first create and then update the datatable where needed.
1) Make sure all of the tables with a specific class are DataTable by default.
$(document).ready(function(e) {
$('.dataTable').DataTable();
});
2) Update the table after you've submitted your Ajax.
$('.dataTable').change(function(e) {
$('.dataTable').draw();
});
I want to make a table, based on this model (Material Design Lite) :
https://getmdl.io/components/index.html#tables-section
In my code, I have a list, and I try to display it, in the following way, by using a ng-repeat :
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Id. administrateurs</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="admin in listAdmins">
<td class="mdl-data-table__cell--non-numeric" ng-model="adminselected">{{admin}}</td>
</tr>
</tbody>
</table>
But the result is not the same than in the illustration example :
As we can see, there is no checkbox on the left and I don't understand why.
Also, how to make a table, where we can directly add data on it ?
In fact, with a fixed list, it works. But mine is generated by a request in a database, and its value can be changed. My listadmin is empty at the beginning, and it is completed by an authentification process.
Your code work correct.
<html ng-app="myApp">
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script>
angular.module('myApp', []).controller('MainController', ['$scope', function($scope){
$scope.listAdmins = ['admin1', 'admin2', 'admin3'];
}]);
</script>
</head>
<body ng-controller="MainController as main">
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Id. administrateurs</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="admin in listAdmins">
<td class="mdl-data-table__cell--non-numeric" ng-model="adminselected">{{admin}}</td>
</tr>
</tbody>
</table>
</body>
</html>
May be some errors occurred? Can you see browser console.
I'm trying to make a simple Premier League table using a free football data api. When I console log vm.table, I get all the data I should have for the table to work. Does that mean there is a fault in the html file? I'm a total novice with angular and I'm trying to learn it by making this little app. Can someone point me to where my problem is? The console shows no errors or anything, but it simply doesn't print the data into the table as expected.
this is the html file:
<html ng-app="eplApp" lang="en">
<head>
<meta charset="UTF-8">
<title>EPL Feeder</title>
<!-- styles -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="style.css">
<!-- scripts -->
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller='tableCtrl as table'>
<table>
<thead>
<tr><th colspan="4">English Premier League Table</th></tr>
<tr>
<td>Pos</td>
<td>Team</td>
<td>Played</td>
<td>Win</td>
<td>Draw</td>
<td>Loss</td>
<td>GF</td>
<td>GA</td>
<td>GD</td>
<td>Points</td>
</tr>
</thead>
<tbody>
<tr ng-repeat='team in vm.table' ng-class="{top:team.position === 1, cl: (team.position > 1) && (team.position < 5), el:team.position === 5, rel: (team.position > 17)}">
<td>{{team.position}}</td>
<td class="flexbox" ng-click="teamView()">
<img ng-src="{{team.crestURI}}" alt="{{team.teamName}} crest" />
<p class="teamName">{{team.teamName}}</p>
</td>
<td><p>{{team.playedGames}}</p></td>
<td>{{team.wins}}</td>
<td>{{team.draws}}</td>
<td>{{team.losses}}</td>
<td>{{team.goals}}</td>
<td>{{team.goalsAgainst}}</td>
<td>{{team.goalDifference}}</td>
<td>{{team.points}}</td>
</tr>
</tbody>
</table>
This is the script file:
var app = angular.module('eplApp', []);
app.controller('tableCtrl', function($http) {
var vm = this;
vm.table = [];
$http({
headers: { 'X-Auth-Token': '971acba677654cdb919a7ccebd5621e2' },
method: "GET",
url: "http://api.football-data.org/v1/soccerseasons/426/leagueTable"
}).then(function(response) {
vm.table = response.data.standing;
console.log(vm.table);
});
});
You should change,
From
<body ng-controller='tableCtrl as table'>
To
<body ng-controller='tableCtrl as vm'>
it should be similar to this because you use controllerAs syntax in your app.
<tr ng-repeat='team in table.standing' ...
Edit
after editing your question you should use #Sajeetharan answer.