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>
Related
Please help me, again. Because I'm newbie.
i've problem with my datatable. when i load in my chrome, it give me feedback like this:
i try to add this code, but it also doesnt work. what must i do?
<script type="text/javascript">
$(document).ready(function(){
siswa.php code:
<?php
$this->load->view('admin/head.php');
?>
<body>
<div class="wrapper">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Data Berhasil Dimasukkan</h4>
<br>
<a class="btn btn-info" href="<?php echo site_url("admin/nav_admin");?>" role="button" float="right">Back To</a>
<br>
<br>
<table class="table table-striped" style="width:100%">
<thead>
<tr>
<th style="width:20%">NISN</th>
<th style="width:35%">Nama</th>
<th style="width:15%">Jenis Kelamin</th>
<th style="width:20%">Nilai</th>
<th style="width:20%">Jurusan</th>
</tr>
</thead>
<tbody>
<?php
if( ! empty($import)){ // Jika data pada database tidak sama dengan empty (alias ada datanya)
foreach($import as $data){ // Lakukan looping pada variabel siswa dari controller
echo "<tr>";
echo "<td>".$data->nisn."</td>";
echo "<td>".$data->nama."</td>";
echo "<td>".$data->jenis_kelamin."</td>";
echo "<td>".$data->nilai_rata."</td>";
echo "<td>".$data->kode_jurusan."</td>";
echo "</tr>";
}
} else{ // Jika data tidak ada
echo "<tr><td colspan='4'>Data tidak ada</td></tr>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript"> // uncaught referenceerror $ is not defined in datatable
$(function(){
$("table").DataTable();
});
</script>
here's the head.php code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Halaman Admin</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="<?php echo base_url('assets/css/stylesidebar.css');?>">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
Put your js code in:
jQuery(function($){
});
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>
I have a simple data table with about 93 columns....but I don't have the show entries, sort icons or search box in my table header. I have all of my columns..Not sure if I'm missing something or the order how my scripts loads is not correct?
HTML
<div class="dataTable_wrapper">
<div class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<asp:Repeater id="repeater_Sales" runat="server">
<HeaderTemplate>
<table border="1" id="vSales" class="table table-striped table-bordered table-hover">
<thead>
<th>Customer</th>
<th>Location</th>
<th>POS</th>
<th>Product</th>
<th>QTY</th>
<th>Sales</th>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Container.DataItem("cus_desc")%></td>
<td><%#Container.DataItem("loc_desc")%></td>
<td><%#Container.DataItem("pos_desc")%></td>
<td><%#Container.DataItem("pro_desc")%></td>
<td><%#Container.DataItem("quantity_sold")%></td>
<td><%#Container.DataItem("net_sales")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</div>
CSS
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- DataTables CSS -->
<link href="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<!-- DataTables Responsive CSS -->
<link href="../bower_components/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom datepicker -->
<link href="../bower_components/datepicker/css/datepicker.css" rel="stylesheet" type="text/css">
JavaScript - plugins
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- DataTables JavaScript -->
<script src="../bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<!-- jQuery Validate-->
<script src="../bower_components/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Datepicker Plugin JavaScript -->
<script src="../bower_components/datepicker/js/bootstrap-datepicker.js"></script>
Javascript
$('#vSales').DataTable(
"bPaginate": true,
"bFilter": true,
"bInfo": true
);
Initialization code should be:
$('#vSales').DataTable({
"paging": true,
"searching": true,
"info": true
});
However the code above could be simplified as shown below, because the values you're using the same as default ones.
$('#vSales').DataTable();
My fancybox isn't working. I have looked through these forums and can't seem to figure out why. I'm somewhat new at this. I read that there could be an issue with the newer version of fancybox with jquery?
Any help would be greatly appreciated as I'd really like to implement fancybox into my portfolio site.
Here's a link to the site I'm working on (please bear with me as it is still in progress): http://calpoly.edu/~hmtorres/finalproject/index.html
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>Haley Torres</title>
<link rel="stylesheet" href="main.css">
<!--google font-->
<link href='http://fonts.googleapis.com/css?family=Roboto:500,400italic,700,300italic,400' rel='stylesheet' type='text/css'>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="javascript/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/fancybox/source/jquery.fancybox.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="javascript/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="javascript/fancybox/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="javascript/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="javascript/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
</head>
<body>
<div id="container">
<div id="nav">
<img src="images/identity-h80-w149.png" alt="Haley Torres">
<ul>
<li>WORK</li>
<li>ABOUT</li>
<li>RESUME</li>
<li>CONTACT</li>
</ul>
</div><!--end of nav-->
<div id="work">
<br><!--line break pulls our computer from under navbar-->
<img src="images/computer.png" alt="Work station">
<h1>My Work</h1>
<table>
<tr>
<td><a class="fancybox" href="images/moviepostermockup-large.png" alt="Movie Poster"><img src="images/moviepostermockup-small.png" alt="Movie Poster"></a></td>
<td><a class="fancybox" href="images/p4pmockup-large.png" alt="Pints for Pups Poster"><img src="images/p4pmockup-small.png" alt="Pints for Pups Poster"></a></td>
<td><img src="images/personalidentity-small.png" alt="Personal Identity"></td>
</tr>
<tr>
<td>row 2</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
</div><!--end of work-->
And further down:
<!--fancybox-->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body><!--end of body-->
</html>
I've downloaded everything to the correct folder and it is linked properly. When I click the image, it links to the bigger image, not popping up in the fancybox.
You're calling jQuery twice in your HTML which will break Fancybox. Try removing
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
From line 143 in your HTML and it should work.
I am trying to load facebook like plugin in html5 page. My code works fine in JsFiddle and w3schools executer but it is not working in my hosted environment.
My Code is given below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Top Ten With social networking</title>
<meta name="description" content="ten" />
<script type="text/javascript">
if (top != self) {
window.open(self.location.href, '_top');
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<!-- Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<!-- CSS3 Animation -->
<link rel="stylesheet" href="css/animate-custom.css" type="text/css" />
<!-- Some Style for Demo -->
<link rel="stylesheet" href="css/global-demo.css" type="text/css" />
<!-- sample CSS Pack -->
<link rel="stylesheet" href="css/css.css" type="text/css" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body onLoad="$('#fb1,#fb2,#fb3,#fb4,#fb5,#fb6,#fb7,#fb8,#fb9,#fb10').slideToggle(500);">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="mainform">
<h1> <img src="images/demo/sonhlab-80.png" alt="" /> LisTop </h1>
<!-- START -->
<ul class="topten height-500">
<!-- Start Tab 1 -->
<li>
<!-- Start Tab Button -->
<label for="tab11" class="tabtile tabtile-small solid-blue-2 hovershadow-blue light-text"> <i class="icon-film icon-3x"></i> <span class="light-text">Movies</span> </label>
<input type="radio" name="topten" id="tab11">
<!-- End Tab Button -->
<!-- Start Tab Content -->
<div class="tab-content animated tab-bounceIn solid-blue-2 light-text pos-top-100" style="width:100%" align="center">
<p class="title">Movies</p>
<div align="center">
<!-- <button onClick="$('#fb1,#fb2,#fb3,#fb4,#fb5,#fb6,#fb7,#fb8,#fb9,#fb10').slideToggle(500);">View More...</button>--> </div>
<table border="1" cellpadding="0" cellspacing="0" width="96%">
<thead>
<tr>
<th align="left">Column1</th>
<th align="left" >Column2</th>
<th align="left" >Column3</th>
<th align="left" >Column6</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="empty">1</span></td>
<td>111</td>
<td>111</td>
<td><i class="icon-facebookSq icon-1x" onClick="$('#fb1').slideToggle(500);"></i></td>
</tr>
<tr id="fb1">
<td colspan="6" align="center" bgcolor="#cff4f7"> fb1
<div class="fb-like" data-href="https://www.facebook.com/BoomEvent" data-layout="standard" data-action="like" data-show-faces="true" data-share="true" align="center"></div></td>
</tr>
<tr>
<td><span class="empty">2</span></td>
<td>222</td>
<td>2222</td>
<td><i class="icon-facebookSq icon-1x" onClick="$('#fb2').slideToggle(500);"></i></td>
</tr>
<tr id="fb2">
<td colspan="6" align="center" bgcolor="#cff4f7"> fb2
<div class="fb-like" data-href="https://www.facebook.com/BoomEvent" data-layout="standard" data-action="like" data-show-faces="true" data-share="true" align="center"></div></td>
</tr>
</tbody>
</table>
</div>
<!-- End Tab Content -->
</li>
<!-- End Tab 1 -->
</ul>
<!-- END -->
</div>
</div>
</body>
</html>
The present hosted link is: http://maxoft.in/index_2.html
Expected Scenario: On clicking on the FB icon the facepiles and the fb like button should be visible in the hosted environment.
Actual Scenario: Facebook facepiles, Likes, Share buttons are not visible on loading.
Kindly help me to achieve the existing scenario. Please let me know if you need any other info.