I am building an application using Meteor. I am using the jquery datatables plugin to render a table of data.
https://www.datatables.net/
When my table loads, ALL of the data is loaded, instead of the default 'show 10 entries'. Furthermore, when I click on a column to sort, all of the data disappears and becomes "No data available in table".
Here is my html:
<template name="Tires">
<head>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>
</head>
<script>
//$(document).ready( function () {
//$('#tires').DataTable();
//});
</script>
<h1>tires</h1>
<br>
<table id="tires">
<thead>
<tr>
<th>Brand</th>
</tr>
</thead>
<tbody>
{{#each products}}
<tr>
<td>{{brand}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>
Here is my template helpers page:
Template.Tires.onRendered(function() {
$('#tires').DataTable();
alert('rendred!');
});
Note - for development purposes, I am only showing the "Brand" column for now... Does anyone have any idea what might be going on?
Related
I have implemented Datatables into my Spring MVC, Java, Bootstrap 5, Thymeleaf project and the results are great. The only issue is a cosmetic one - the text is wrapping in the length menu and search sections. This can be seen at the top of the attached image where "Show 10 entries" is split across 3 lines and the Search table and box are split over 2 lines.
I am using the latest versions of jquery.dataTables.min.css, jquery.dataTables.min.js and dataTables.bootstrap5.min.js with no custom configuration: -
$(document).ready(function () {
$('table.display').DataTable();
});
Here is an HTML snippet with one row of data:
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Java Documentum Services</title>
<link rel="stylesheet" href="/assets/jquery/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="/assets/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="/assets/dropzonejs/dropzone.css"/>
</head>
<body>
<div class="container pt-3 pb-3">
<table id="search-results"
class="display"
style="width:100%">
<thead>
<tr>
<th>Filename</th>
<th>Test</th>
<th>Case Id</th>
<th>Upload Time</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>download.pdf</span>
</td>
<td>
<span>JH-06062022-01</span>
</td>
<td>
<span>test-case-12344444</span>
</td>
<td>
<span>2022-07-22 11:03 GMT</span>
</td>
<td>
<!--Actions button-->
<!--Download button-->
<!--Delete button-->
</td>
</tr>
</tbody>
</table>
<script src="/assets/jquery/jquery-3.5.1.js"></script>
<script src="/assets/jquery/jquery.dataTables.min.js"></script>
<script src="/assets/datatables/dataTables.bootstrap5.min.js"></script>
<script src="/assets/jds/dataTables.js"></script>
<script src="/assets/bootstrap/bootstrap.min.js"></script>
<script src="/assets/dropzonejs/dropzone.min.js"></script>
<script src="/assets/jds/dropzone.js"></script>
</body>
</html>
I can see that these two sections are defined in sLengthMenu and sSearch in the JavaScript code, so perhaps a code change could be an option, but it would be preferable if it could be fixed with a configuration change instead. I also wondered if perhaps there is a clash with one of the other CSS stylesheets or JavaScript libraries that I am using - these are visible in the sample HTML.
I'm using 2 javascript plugins : floatThead and Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin
The sticky header is working great until you try to filter the rows. You can only see the div inside the table header when the page is at the top. Once the header is moving, the filter button doesn't display anything
I made an example in JS Fiddle (full code also below - just duplicates the rows to have a certain amount) :
https://jsfiddle.net/9713qa6n/
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://www.jqueryscript.net/css/jquerysctipttop.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://www.jqueryscript.net/demo/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin/excel-bootstrap-table-filter-style.css" />
<link type="text/css" rel="stylesheet" href="" />
<link type="text/css" rel="stylesheet" href="" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin/excel-bootstrap-table-filter-bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.2.4/jquery.floatThead.min.js"></script>
</head>
<body>
<!-- Table to be filtered with a sticky header -->
<table id="table" class="table table-bordered table-intel sticky-header">
<!-- Header that should remain sticky and having filters -->
<thead>
<tr class="table-info">
<th>Animal</th>
<th>Class</th>
<th>Collective Noun</th>
</tr>
</thead>
<!-- Body of the table that should be filtered -->
<tbody>
<tr>
<td>Bear</td>
<td>Mammal</td>
<td>Sleuth</td>
</tr>
<tr>
<td>Ant</td>
<td>Insect</td>
<td>Army</td>
</tr>
<tr>
<td>Salamander</td>
<td>Amphibian</td>
<td>Congress</td>
</tr>
<tr>
<td>Owl</td>
<td>Bird</td>
<td>Parliament</td>
</tr>
........
</tbody>
</table>
<script type="text/javascript">
// Use the plugin once the DOM has been loaded.
$(function () {
// Apply the plugin
$('#table').excelTableFilter();
$('.sticky-header').floatThead({
position: 'absolute'
});
});
</script>
</body>
</html>
I don't know how to get this fixed. Any help would be very welcomed !
Answer from Misha Koryak
This is not this filter's fault, they cannot be expected to handle what other plugins do to the DOM.
Here is an ugly hack that solves your problem:
https://jsfiddle.net/08hf4pdt/
It also voids the warranty on the flaotthead plugin, but I doubt you care :)
$(function () {
// Apply the plugin
$('#table').excelTableFilter();
$('.sticky-header').floatThead({
position: 'absolute'
}).closest('.floatThead-wrapper').find('.floatThead-container').css('overflowX', 'visible');
});
After 2 days reading all topics about jQuery Bootgrid and AngularJS, I still can't use angular directives on my generated grid.
I'm using AngularJS 1.6.6 and jQuery Bootgrid 1.3.1. The page that is using it is running fine and all the elements outside the grid are working with angular directives. All the elements are inside the right ng-app and ng-controller tagged root.
The problem is that I have some buttons inside the grid and they are all losing their events like onclick, tooltips, etc. So I wanted to map them using ng-click instead of the jQuery .click(function () {}).
There are no error messages, only the events are just not firing.
All functions pointed inside the directives are declared on my scope.
I'm almost concluding that the jQuery Bootgrid isolates its own scope and avoid angular to get into it. Does that proceed?
<html lang="en">
<head>
<title>Example - jQuery Bootgrid and Angular</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<link href="https://cdn.bootcss.com/jquery-bootgrid/1.3.1/jquery.bootgrid.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.6.6/angular.min.js"></script>
<script>
var app = angular.module('app', []).controller('appController', ['$scope', function ($scope) {
$scope.test = function () {
alert('Clicked!');
}
$("#grid-basic").bootgrid({
templates: {
search: '<div class="search form-group"><div class="input-group"><span class="icon glyphicon input-group-addon glyphicon-search"></span> <input type="text" ng-click="test()" class="search-field form-control" placeholder="Pesquisar"></div></div>'
}
});
}]);
</script>
</head>
<body ng-app="app" ng-controller="appController">
<br />
<br />
<div class="btn btn-primary" ng-click="test()">Test</div>
<br />
<br />
<table id="grid-basic" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">id</th>
<th data-column-id="sender">e-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>xxx#yyy.com</td>
</tr>
<tr>
<td>2</td>
<td>www#yyy.com</td>
</tr>
<tr>
<td>3</td>
<td>zzz#yyy.com</td>
</tr>
</tbody>
</table>
</body>
</html>
First you must have a function (eg ngFunction) and then try:
<button id="something" ng-click="ngFunction(doSomething)">
Since there was no definitive answer I changed my component and stopped looking for this compatibility issue. I still think that there was a way to attach the grid plugin to my angularjs scope, but time is not on my side here.
This is my HTML page:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="http://tablesorter.com/jquery-latest.js" type="text/javascript"/>
<script src="http://tablesorter.com/jquery.tablesorter.js" type="text/javascript"/>
<script type="text/javascript">$(document).ready(function () {
$("#myTable").tablesorter({sortList: [[0, 0]]});
});
</script>
</head>
<body>
<h1>Repid Type Table</h1>
<table class="tablesorter" id="myTable">
<tr>
<th>PERNR</th>
<th>INNBOUND</th>
<th>FIRSTNAME</th>
<th>LASTNAME</th>
<th>CATSHOURS</th>
<th>DIFF</th>
</tr>
<tr>
<td>00017808</td>
<td>26.50</td>
<td>Roland</td>
<td>Block</td>
<td>1830.70</td>
<td>1804.20</td>
</tr>
<tr>
<td>123412</td>
<td>111.34</td>
<td>Koray</td>
<td>Tugay</td>
<td>945.56</td>
<td>234.43</td>
</tr>
</table>
</body>
</html>
But the table I see does not seem to be functional at all. What am I missing?
I think you're missing closed </script> tag for you "includes":
<script src="http://tablesorter.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://tablesorter.com/__jquery.tablesorter.min.js" type="text/javascript"></script>
Update
Fix source path. Might also consider to use some CDN to load your javascript library. For example https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.2/js/jquery.tablesorter.min.js
I used angular datatables with fixed column, my HTML code for view as the following:
<div class="row" ng-controller="PerformanceCtrl">
<table id="example" datatable=""
class="stripe row-border order-column"
dt-options="dtOptions">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
</tr>
</tbody>
</table>
And my controller code as the following:
'use strict';
app.controller('PerformanceCtrl', ['$scope', 'DTOptionsBuilder', 'DTColumnDefBuilder', function ($scope, DTOptionsBuilder, DTColumnDefBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('scrollY', '300px')
.withOption('scrollX', '100%')
.withOption('scrollCollapse', true)
.withOption('paging', false)
.withFixedColumns({
leftColumns: 1
});
}]);
And for my index.html file, I included datatables libraries as the following order:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="modules/performance/controller.js"></script>
<link rel="stylesheet" href="bower_components/angular-datatables/dist/plugins/bootstrap/datatables.bootstrap.css">
<script src="bower_components/DataTables/media/js/jquery.dataTables.js"></script>
<script src="bower_components/angular-datatables/dist/angular-datatables.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/fixedheader/angular-datatables.fixedheader.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/fixedcolumns/angular-datatables.fixedcolumns.min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/DataTables/media/css/jquery.dataTables.min.css">
And This my module:
var app = angular.module('MyApp', ['datatables', 'datatables.fixedcolumns']);
But I got this error undefined is not a function as this image:
If I removed the following code from options of table, No error but no fixedColumns:
.withFixedColumns({
leftColumns: 1
});
I need to make my first column fixed, How can I fix this error ?
I post this question on github, and l-lin answer on it.
I missed including the following:
<script src="vendor/FixedColumns-3.0.4/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/FixedColumns-3.0.4/css/dataTables.fixedColumns.min.css">
I should download the FixColumns jQuery.
You just forgot to add the ng attribute to the datatables.
Below is working Screen shot ...
Click here for Live Demo