Bootstrap - My table can't read a local JSON file - javascript

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.

Related

How to edit a row in datatables

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()

changing the text in a html table cell depending on value

$(function(){
$("tr").each(function(){
var col_val = $(this).find("td:eq(1)").text();
if (col_val == "open"){
$(this).addClass('table-primary'); //the selected class colors the row green//
} else if (col_val == "in progress"){
$(this).addClass('table-success'); //the selected class colors the row green//
} else {
$(this).addClass('table-secondary');
var col_edit = $(this).find("td:eq(0)");
// console.log("jes");
//console.log(col_edit);
// addClass('h1') is just for testing, if I selected the right cell -> this seems to work!!
$(col_edit).addClass('h1');
// PLEASE HELP HERE: Instead of a big h1 'Edit' in cell 3 i want to see nothing ('')
// these versions I tried:
$(col_edit).text = "";
$(col_edit).innerHTML = "";
$(col_edit).value = "";
$(col_edit).text = '';
$(col_edit).innerHTML = '';
$(col_edit).value = '';
$(col_edit).addClass('hidden');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<!-- UNIMPORTANT HEAD -->
<head th:fragment="header">
<meta charset="UTF-8" />
<title th:text="${title}">DiKuKa</title>
<link rel="shortcut icon" type="image/x-icon" href="images/dikuka.ico">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script th:src="#{/js/custom.js}"></script>
</head>
<!-- THE IMPORTANT TABLE: -->
<div class="table-responsive">
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col"></th>
<th scope="col">status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Edit</td>
<td>open</td>
</tr>
<tr>
<td>Edit</td>
<td>in progress</td>
</tr>
<tr>
<td>Edit</td>
<td>closed</td>
</tr>
</tbody>
</table>
<br>
<hr>
</div>
<br>
https://jsfiddle.net/q5hn6d72/1/
I'm trying to delete the text in a table cell using javascript depending on the value in another cell.
The purpose is that you should not be able to click the link of the text in that cell anymore when the status value is equal to "closed".
Please try the fiddle, at the bottom of the Javascript I marked the different approached that I tried so far. I managed to select the right cell with col_edit, otherwise the cell wouldn't be shown as a h1.
Any tips are welcome!
screenshot of the actual project
Simply you can check 1 more condition for closed as
else if (col_val == "closed"){
$(this).find("td:eq(0)").html('');
When closed then remove text of td
$(function(){
$("tr").each(function(){
var col_val = $(this).find("td:eq(1)").text();
//console.log(col_val);
if (col_val == "open"){
$(this).addClass('table-primary'); //the selected class colors the row green//
} else if (col_val == "in progress"){
$(this).addClass('table-success'); //the selected class colors the row green//
} else if (col_val == "closed"){
$(this).find("td:eq(0)").html('');
} else {
$(this).addClass('table-secondary');
var col_edit = $(this).find("td:eq(0)");
console.log("jes");
// console.log(col_edit);
// addClass('h1') is just for testing, if I selected the right cell -> this seems to work!!
$(col_edit).addClass('h1');
// PLEASE HELP HERE: Instead of a big h1 'Edit' in cell 3 i want to see nothing ('')
// these versions I tried:
$(col_edit).text = "";
$(col_edit).innerHTML = "";
$(col_edit).value = "";
$(col_edit).text = '';
$(col_edit).innerHTML = '';
$(col_edit).value = '';
$(col_edit).addClass('hidden');
}
});
});
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<!-- UNIMPORTANT HEAD -->
<head th:fragment="header">
<meta charset="UTF-8" />
<title th:text="${title}">DiKuKa</title>
<link rel="shortcut icon" type="image/x-icon" href="images/dikuka.ico">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script th:src="#{/js/custom.js}"></script>
</head>
<!-- THE IMPORTANT TABLE: -->
<div class="table-responsive">
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col"></th>
<th scope="col">status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Edit</td>
<td>open</td>
</tr>
<tr>
<td>Edit</td>
<td>in progress</td>
</tr>
<tr>
<td>Edit</td>
<td>closed</td>
</tr>
</tbody>
</table>
<br>
<hr>
</div>
<br>

jQuery Datatables Not Working

I am using Angularjs as the frontend and spring mvc as the backened for my application. I am using datatables for displaying records. The problem I am facing is datatables works sometimes and sometimes doesn't.
After performing edit or delete or any dynamic operations the datatable loses its shape like pagination, filtration, search. Even though there will be data but it shows there are no records but still it displays records with no pagination.
I tried draw() and reload methods in the script but nothing seemed to work.
In html pages my order of loading css and js files are like this
<html lang="en" data-ng-app="adminApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/css/bootstrap.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/css/Custom-Style.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/font-awesome-4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/font-awesome-4.0.3/css/font-awesome.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" media="screen" ref="resources/front/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="resources/angular/angulars-datetime-picker.css" />
<link rel="stylesheet" href="resources/front/css/spinner.css">
<script src="resources/front/js/jquery-1.12.4.js" type="text/javascript"></script>
<script src="resources/front/js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" src="resources/front/js/Custom-js.js"></script>
<script src="resources/front/js/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript" src="resources/front/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="resources/front/js/dataTables.responsive.min.js"></script>
</head>
</html>
This is the script where I tried everything. I have placed this inside the head tag. I have placed all the above code in every html file.
<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>
Here is how i am using ng-repeat for displaying data in table
<div class="TableBox">
<table id="example" class="display responsive nowrap"
cellspacing="0" width="100%" >
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example"
rowspan="1" colspan="1" aria-sort="ascending" aria-label="" >
SlNo
</th>
<th class="sorting_asc" tabindex="0" aria-controls="example"
rowspan="1" colspan="1" aria-sort="ascending"
aria-label="">Name</th>
</tr>
</thead>
<tbody>
<tr role="row" class="even" data-ng-repeat="student in students">
<td>{{$index + 1}}</td>
<td>{{student.studentName}}
</td>
</tr>
</tbody>
</table>
</div>
Here is my AngularController.js
$scope.getAllStudents = function()
{
AdminStudentService.getAllStudents().then(function(response)
{
$scope.students=response.data;
});
}
Here is my update method
$scope.updateStudent = function(student)
{
$scope.editstudentForm.$submitted= true;
if($scope.editstudentForm.$valid)
{
AdminStudentService.updateStudent(student).then(function(response)
{
if(response.data=="success")
{
$scope.editstudentForm.$submitted= false;
$window.scrollTo(0,0);
$scope.student = {};
$scope.getAllStudents();
$scope.successmessage1="Student Details Updated!;
$timeout(function()
{
$scope.closeeditStudent();
$scope.successmessage1="";
}, 1500);
}
});
}
}
Am I missing something in the script or do I need to add something?
I'm providing you with .js function that will help you understand datatables.
$scope.getAllReports = function() {
$http({
method : 'GET',
url : '/getReport'
}).success(function(data, status, headers, config) {
$scope.test = data;
$('#stack').DataTable().clear().draw();
angular.forEach($scope.test, function(test) {
$('#mantisi').DataTable().row.add([
test.t0,
test.t1,
test.t2,
test.t3,
test.t4,
test.t5
]).draw();
});
});
};
Also here is code from .html:
<table id="stack" class="table table-bordered table-striped" ng-init="getAllReports()">
<thead>
<tr>
<th>t0</th>
<th>t1</th>
<th>t2</th>
<th>t3</th>
<th>t4</th>
<th>t5</th>
</tr>
</thead>
<tbody></tbody>
</table>
And also a .js for DT:
$('#stack').DataTable({
"order": [[ 0, "asc" ]],
"language": {
url: '/datatables/datatables.hr.json'
},
"drawCallback": function( settings ) {
$(".btn-excel-custom").removeClass("dt-button buttons-excel buttons-html5");
$(".btn-default-custom").removeClass("dt-button").addClass("btn btn-default");
},
"bPaginate": false,
dom: 'Bfrt',
buttons: [{
text:"Export to Excel",
extend: 'excel',
className: 'btn btn-excel-custom'
}]
});
These are 3 main snippets for decent show-up of jQuery datatables. Also, I've created special methods provided by DT API in last snippet.

Loading data with bootstrapTable fails

I am new to bootstrap and simply trying to replicate several examples of loading data into a bootstrap table, but my data does not show up. Here is the html from jsfiddle
<table class="table" id="table">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
And here is the javascript:
var $table = $('#table');
var mydata = [{
"id": 0,
"name": "test0",
"price": "$0"
}];
$(function() {
$('#table').bootstrapTable(
data: mydata)
);
});
The header shows up fine, but the data does not. Here is a link to the jsFiddle.
bootstrapTable does not come with bootstrap. you need to include it.
https://jsfiddle.net/9g7c34rb/1/
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

Angular datatables Fixed Columns undefined is not a function

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

Categories