So I followed everything on the basic example at : http://datatables.net/examples/basic_init/zero_configuration.html
Unfortunately, My current table stays in the bootstrap style and nothing of the DataTable is shown, No errors occurred. If you see anything wrong please let me know.
Table design :
<div class="table-responsive">
<table class="table table-hover" id="mw_table">
<thead>
<th>Volledige naam</th>
<th>E-mail</th>
<th></th>
<th></th>
</thead>
<tbody>
#foreach($medewerkers as $medewerker)
<tr>
<td>{{$medewerker->voornaam . ' ' . substr($medewerker->tussenvoegsel,0,5) . ' ' . $medewerker->achternaam}}</td>
<td>{{$medewerker->email}}</td>
<td>
{{--<input type="hidden" class="zoeknaam2" value="{{$project->projectnaam}}" name="zoeknaam2" class="form-control" placeholder="Projectnaam">--}}
<button class="btn btn-success btn-xs wijzigKnop2" name="zoekProject" type="button" data-project="{{$medewerker->email}}">
<i class="glyphicon glyphicon-pencil"></i>
</button>
</td>
<td>
<a href="/verwijderGebruiker/{{$medewerker->id}}" class="">
<button type="submit" class="btn btn-danger btn-xs">
<i class="glyphicon glyphicon-remove"></i>
</button>
</a>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
JavaScript code:
<script type="text/javascript">
$(document).ready( function () {
$('#mw_table').DataTable();
} );
</script>
Includes:
<script src="{{URL::asset('../assets/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('../assets/js/jquery.js')}}"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.10/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
got it working. builded an new datatables library in the Downloader of their website and voila!
Related
Why am i having two select pickers, when there should be only one. Actually, I am copying the first row of table in my javascript function, and pasting it (as a new row) when the user presses "Add" button. But there seems to be a problem with select picker.
Press "Add New" button to see the problem. See the Jsfiddle please
output i am having on jsfiddle
This is my js file:
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
var accounts = $("table td:first-child").html();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function() {
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row =
"<tr>" +
"<td>" +
accounts +
"</td>" +
'<td><input type="text" class="form-control" name="debit"></td>' +
'<td><input type="text" class="form-control" name="credit"></td>' +
'<td><input type="text" class="form-control" name="description"></td>' +
"<td>" +
actions +
"</td>" +
"</tr>";
$("table").append(row);
$("table tbody tr")
.eq(index + 1)
.find(".add, .edit")
.toggle();
$('[data-toggle="tooltip"]').tooltip();
$('.selectpicker').selectpicker('render'); //is this line problematic?
});
});
This is the corresponding part of HTML file:
<!DOCTYPE html>
<html lang="en" xmlns:th="w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/dashboardAssets/img/favicon.png" />
<title>Create Transaction</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- bootstrap-select CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.0/css/bootstrap-select.css" integrity="sha512-fbGrX/r0npKKqlimb6PTYM51KC1aAmZtP3srWTAKiavy3ISb0B2SrA4SXCePEZxphpjJJn6+OoAUxxqbHUD5Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- font icon -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- container section start -->
<section id="container" class="">
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa fa-bars"></i> Transaction</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-bars"></i>Transaction</li>
<li><i class="fa fa-square-o"></i>Create Transaction</li>
</ol>
</div>
</div>
<!-- page start-->
<form action="/commitTransaction">
<div class="row">
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-8">
<h2>Create <b>Transaction</b></h2>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i>
Add New</button>
</div>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Account</th>
<th>Debit</th>
<th>Credit</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="row-fluid">
<select class="selectpicker" data-live-search="true" data-live-search-placeholder="Search">
<option value=""> -- Nothing Selected -- </option>
<optgroup label="Customers">
<option>cx</option>
<option>cy</option>
<option>cz</option>
</optgroup>
</select>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="panel panel-body">
<button class="btn btn-primary btn-lg" style="float:right" type="submit">Commit</button>
</div>
</div>
</div>
</form>
<!-- page end-->
</section>
</section>
</section>
<!--main content end-->
<!-- javascripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- bootstrap-select -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js" integrity="sha512-yDlE7vpGDP7o2eftkCiPZ+yuUyEcaBwoJoIhdXv71KZWugFqEphIS3PU60lEkFaz8RxaVsMpSvQxMBaKVwA5xg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
I am using Thymeleaf and Java Spring in the project. Please help me out. Thanks
The reason for you seeing this twice, is because you copy everything. The selectpicker('render') works similar to jQuerys select2(). It hides the select and inserts some divs/spans to display a browser-rendered "fake"-selection, not an OS rendered selection.
If you would (for example) use the last row of the table, as a preset, you would have an additinal selectpicker-button every time you call add new.
Just copy the select, not the whole content from the first column.
Changing:
var accounts = $("table td:first-child").html();
to
var accounts = $("table td:first-child select").get(0).outerHTML;
will solve your issue.
I am trying to change the content of multiple elements with the same id, using:
window.onload = function() {
document.getElementById('price_01').innerHTML = price_01;
document.getElementById('dimension_01').innerHTML = dimension_01;
}
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script type="text/javascript">
var price_01 = '$8000';
var dimension_01 = '10m';
window.onload = function() {
document.getElementById('price_01').innerHTML = price_01;
document.getElementById('dimension_01').innerHTML = dimension_01;
}
</script>
<body>
<div class="w3-container">
<h2>W3.CSS Modal</h2>
<div class="w3-container">
<table class="table">
<tbody>
<tr>
<td>Price:</td>
<td id='price_01'></td>
</tr>
<tr>
<td>Dimension:</td>
<td id='dimension_01'></td>
</tr>
</tbody>
</table>
</div>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<div class="w3-container">
<table class="table">
<tbody>
<tr>
<td>Price:</td>
<td id='price_01'></td>
</tr>
<tr>
<td>Dimension:</td>
<td id='dimension_01'></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
However, it seems that the code doesn't work because you can only have one unique id for each element. Is there a more elegant solution to this problem without for loops and class? I have a lot of these elements to populate and I don't really want to write a for loops for each of them.
I tried for tow days to add search field and sorting data table using jquery but always i show this error :
Uncaught TypeError: $(...).DataTable is not a function
I changed the script source order but can't run
PS : I'm using thymeleaf, bootstrap
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link th:replace="fragments/header :: header" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.js"></script>
</head>
<body>
<div th:replace="fragments/menu :: menu"></div>
<div class="row">
<div class="col-md-4">
<h1>Listado de Provinces</h1>
</div>
<div class="col-md-8">
<a href="/createprovince" class="btn btn-primary a-btn-slide-text">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span><strong>Crear Province</strong></span>
</a>
Home
</div>
</div>
<table id="example" class="table table-striped">
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Opciones</th>
</tr>
</thead>
<tbody>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}"></td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
"pagingType": "full_numbers"
});
});
</script>
<div th:replace="fragments/footerscripts :: footer"></div>
</body>
</html>
This a screen shoot
This error comes because of this code snippet did not take the insecure link so you put https:// for loading data tables. check it with other editor with http:// that woks for me.
the body of the first column have no values. data tables shows this type if errors and alert because missed values.
some times the
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link th:replace="fragments/header :: header" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
"pagingType": "full_numbers"
});
});
</script>
</head>
<body>
<div th:replace="fragments/menu :: menu"></div>
<div class="row">
<div class="col-md-4">
<h1>Listado de Provinces</h1>
</div>
<div class="col-md-8">
<a href="/createprovince" class="btn btn-primary a-btn-slide-text">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span><strong>Crear Province</strong></span>
</a>
Home
</div>
</div>
<table id="example" class="table table-striped">
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Opciones</th>
</tr>
</thead>
<tbody>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}">1</td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a><br/>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}">2</td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a><br/>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
</tbody>
</table>
<div th:replace="fragments/footerscripts :: footer"></div>
</body>
</html>
Thank you for your answer, i resolved the problem. The source of the problem was a conflict with anathor jquery local file
Please, can you help me with integration datatables bootstrap on my simple table? I add this code, and not working for me.
I also tried to add links of scripts to head, but not working too. What am I doing wrong in this code?
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery/dataTables.bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="jumbotron">
<h3>Požičovňa náradia SEAS</h3>
</div>
<script>
$(document).ready(function() {
$('#tabulka_kariet').DataTable();
});
</script>
<table id="tabulka_kariet" class="table table-bordered">
<thead>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</tfoot>
<tr>
<td>13245</td>
<td>Sekacie kladivo Bosch 5184</td>
<td class="pocet">12</td>
</tr>
<tr>
<td>6789</td>
<td>Brúska Bosch 5184</td>
<td class="pocet">7</td>
</tr>
</table>
<?php
?>
</div>
</body>
<script src="bootstrap/js/bootstrap.min.js" />
<script src="jquery/jquery-3.0.0.min.js" />
<script src="jquery/dataTables.bootstrap.min.js" />
<script src="jquery/jquery.dataTables.min.js" />
<script src="jquery/jquery-1.12.4.js" />
</html>
You had three problems one I didnt notice and one I found out while helping.
You called your jquery before your script was loaded(My comments on the post are wrong). Call this after the script loads this is why people were telling you to add your scripts into the head.
You used two versions of jQuery. This should not
be done as the final jQuery to load will be the one you use. If you intend to use multiple jQuery files look at no conflict between versions
You load jQuery after bootstrap where it should load before because bootstrap uses jQuery.
Below will run if you want to test it. Change the script urls to your local ones and it should still run. change the css links too to your local one
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery/dataTables.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"></link>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h3>Požičovňa náradia SEAS</h3>
</div>
<table id="tabulka_kariet" class="table table-bordered">
<thead>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</tfoot>
<tr>
<td>13245</td>
<td>Sekacie kladivo Bosch 5184</td>
<td class="pocet">12</td>
</tr>
<tr>
<td>6789</td>
<td>Brúska Bosch 5184</td>
<td class="pocet">7</td>
</tr>
</table>
<?php
?>
</div>
</body>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Datatables -->
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#tabulka_kariet').DataTable();
});
</script>
</html>
As said in the comments you need to place the jQuery scripts above the bootstrap link. This is because bootstrap needs jQuery to work so you need to load jQuery before bootstrap loads
Try it like this:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="bootstrap/js/bootstrap.min.js" />
<script src="jquery/jquery-3.0.0.min.js" />
<script src="jquery/dataTables.bootstrap.min.js" />
<script src="jquery/jquery.dataTables.min.js" />
<script src="jquery/jquery-1.12.4.js" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery/dataTables.bootstrap.min.css" />
</head>
how to use ngResource module
to send data to server.
and get data from server
i trying to send data to solr server
using angularjs api
and npm package manager to install package to my application
thank you for your help
controller.js:
var app=angular.module('myApp', ['ngResource']);
app.controller('Mycontroller',function($scope, $resource) {
$scope.requete = $resource('http://localhost:8983/solr/#/cv/:action',
{action:'cv.json', q:'angularjs', callback:'JSON_CALLBACK'},
{get:{method:'JSONP'}});
$scope.chercher = function () {
$scope.repnses = $scope.requete.get({q:$scope.formInfo.Quoi});
};
})
search.html :client
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body >
<div ui-view></div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Formation</a>
<a class="navbar-brand" href="app/index.html">Formateur</a>
<a class="navbar-brand" href="app/search.html" active>Client</a>
</div>
</div>
</nav>
<div ng-contoller="Mycontroller">
<form class="form-horizontal" role="form">
<div class="table">
<table class="table table-striped">
<tr>
<td>
<label for="inputQuoi" class="col-sm-2 control-label">Quoi</label>
</td>
<td></td>
</tr>
<tr>
<td>
<input class="form-control" id="inputQuoi" placeholder="quoi" ng-model="formInfo.Quoi" required>
</td>
<td><button type="submit" ng-click="chercher()" class="btn btn-primary" >chercher</button></td>
</tr>
</table>
</div>
</form>
<table class="table table-striped">
<tr ng-repeat="repnse in reponses.results">
<td>{{requete.text}}</td>
</tr>
</table>
</div>
<script src="app/js/controller.js"></script>
<script src="node_modules/angular-resource/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</body>
</html>
Not sure if this is your problem.
But you have this...
<tr ng-repeat="repnse in reponses.results">
<td>{{requete.text}}</td>
</tr>
But dont really have any variable called reponses.results, or anything with requete as the variable.
Your code puts the get response in $scope.repnses
So to loop through that you need to refer to it properly.
<tr ng-repeat="repnse in repnses.results">
// Then refer to the variables inside of it using the repnse variable.
// not requet, dont even know where you're getting that from
<td>{{repnse.text}}</td>
</tr>