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
Related
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');
});
I'm trying to edit a row in datatables, clicking on that.
I'm following the documentation: https://datatables.net/reference/api/row().edit(),
but it's not working for me.
I got this error:
"Uncaught TypeError: this_row.edit is not a function"
my code:
(function(){
product_table = $('#product_table').DataTable({
fixedHeader: {
header: true,
footer: true
},
bLengthChange: false
});
row=[
'<div style="white-space: nowrap;">'+
'<button type="button" class="btn edit btn-sm btn-light m-1">Edit</button>'+
'</div>',
'test',
1,
'tes',
2.12,
2.12
]
product_table.row.add(row).draw( false )
$('#product_table tbody').on('click', 'button', function () {
row[2] += 1;
let this_row = product_table.row($(this).parents('tr'));
this_row.edit(row); // <- that point!!!
});
})();
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!--bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- datatable-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<table id="product_table" class="table table-fit">
<thead>
<tr>
<th></th>
<th>name</th>
<th>amount</th>
<th>unit</th>
<th>price unit</th>
<th>total price</th>
</tr>
</thead>
<tbody></tbody>
</table>
*this code is just an example of what I want, I'm not exactly going to increment a number.
In my real code I create a modal with these fields as input and recreate the 'row' variable, but the edit function is basically the same
I finally found a solution.
You can easily edit the row data in this way, without the need for an API:
this_row.data(row).draw();
Documentation:
https://datatables.net/reference/api/row().data()
I don't know, I can't read some JSON file ou put a table which read JSON data (internal or external source)
Does someone have an idea?
Here are my link and script I used
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
Here is my script where I create the table, I use data-URL to load the data from a local JSON file
<table id="table" data-toggle="table" data-height="460" data-search="true" data-url="data.json">
<thead>
<tr>
<th data-field="id">#</th>
<th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th>
<th data-field="type" data-formatter="nameFormatter">Type</th>
<th data-field="artist" data-formatter="nameFormatter">Artiste</th>
<th data-field="sheet" data-formatter="nameFormatter">Fiche</th>
</tr>
</thead>
</table>
<script>
$table.bootstrapTable('refresh',{data: data})
})
function nameFormatter(value) {
return 'Formatted ' + value
}
var $table = $('#table')
$(function() {
var data = [
{"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">"}
]
$table.bootstrapTable({data: data})
})
</script>
I really don't know why it doesn't work...
thanks in advance
If you want to load a local json file, try like below.
function nameFormatter(value) {
return 'Formatted ' + value
}
var data = [
{"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">"}
]
$("#table").bootstrapTable({data: data})
And remove data attribute data-url="data.json" from the table.
You can run the snippet below to see the results.
function nameFormatter(value) {
return 'Formatted ' + value
}
var data = [
{"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">"}
]
$("#table").bootstrapTable({data: data})
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
<table id="table" data-toggle="table" data-height="460" data-search="true">
<thead>
<tr>
<th data-field="id">#</th>
<th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th>
<th data-field="type" data-formatter="nameFormatter">Type</th>
<th data-field="artist" data-formatter="nameFormatter">Artiste</th>
<th data-field="sheet" data-formatter="nameFormatter">Fiche</th>
</tr>
</thead>
</table>
If you want to load from an external source, your function should contain only the formatter function.
Try the snippet below to see the results.
function nameFormatter(value) {
return 'Formatted ' + value
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
<table id="table" data-toggle="table" data-height="460" data-search="true" data-url="https://api.myjson.com/bins/q9n5g">
<thead>
<tr>
<th data-field="id">#</th>
<th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th>
<th data-field="type" data-formatter="nameFormatter">Type</th>
<th data-field="artist" data-formatter="nameFormatter">Artiste</th>
<th data-field="sheet" data-formatter="nameFormatter">Fiche</th>
</tr>
</thead>
</table>
Remove the data-toggle attribute if you are not loading data from external json file.
It seems any calls to $('#table').bootstrapTable() are completely ignored when data-toggle is enabled and data is not rendered.
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.
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?