the data from kontakte_data.php will not be loaded to div id="results", but i can see the database results outside the table, has someone an idea ?
html-code:
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>K-ID</th>
<th>Name</th>
<th>Ort</th>
<th></th>
</tr>
</thead>
<tbody>
<div id="results"></div>
</tbody>
</table>
<div class="pagination"></div>
</div>
ajax-code:
$(document).ready(function() {
$("#results").load("kontakte_data.php");
$(".pagination").bootpag({
total: <?php echo $pages; ?>,
page: 1,
maxVisible: 5,
}).on("page", function(e, num){
e.preventDefault();
$("#results").load("kontakte_data.php", {'page':num});
});
});
Related
Update, seems it is also happening when i go onto the next page (fullscreen this time).
I'm hoping someone could possible help me as this has been driving me crazy. I have a table full off orders which each row has a button. This button when submitted will show an alert.
I am using data-tables (Responsive), and when the table is all on the screen, the button works as intended. However, when the screen is resized and the button goes within the + icon to expand the row. The button is not running the jquery and is submitting the page.
I have no idea how to fix this and was wondering if there is a workaround. Here is a sample of the code if it helps.
<table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order Number</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<?php foreach ($orders as $order): ?>
<tr>
<th scope="row">
<?php echo $order['OrderNumber']; ?>
</th>
<td>
<form id="<?php echo $order['OrderNumber']; ?>">
<input type="submit" value="Submit">
</form>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
At the bottom of the page:
<?php foreach ($orders as $order): ?>
<script>
$('#<?php echo $order['OrderNumber']; ?>').on('submit', function () {
alert('Form submitted!');
return false;
});
</script>
<?php endforeach; ?>
Any help would be appreciated! I have no idea why it isn't working when the table is resized.
Use a delegated event handler instead :
$('#datatable-buttons').on('submit', '#<?php echo $order['OrderNumber'];?>', function() {
alert('Form submitted!');
return false;
});
Your event handler does not work because the form not exists in dom at the time of declaration.
But all those dedicated #id based event handlers is completely unnecessary. A single (delegated) handler is sufficient :
$('#datatable-buttons').on('submit', 'form', function () {
alert('Form ' + $(this).attr('id') + ' submitted!');
return false;
});
Hey mate you could try something like this for the alert
<table id="datatable-buttons" class="table table-striped table- bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order Number</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<?php foreach ($orders as $order): ?>
<tr>
<th scope="row">
<?php echo $order['OrderNumber']; ?>
</th>
<td>
<button type="button" class="btnPress" id="<?php echo $order['OrderNumber']; ?>">Submit</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Bottom
<script>
$('.btnPress').on('click', function () {
alert('Form submitted!');
alert(this.id);
});
</script>
When i display data in bootstrap datatable using ajax jquery then pagination and search box is not display.so how to solve this problem
My html sample code is here.
<div class="row" style="margin-top: 2em;">
<div class="panel panel-white">
<div class="panel-heading clearfix">
</div>
<div class="panel-body">
<div id="live_data" >
//data table display here
</div>
</div>
</div>
And my ajax file code is here
<?php
$output='';
$output.=' <div class="table-responsive">
<table id="example" class="table table-striped table-
bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
</table>
</div>';
echo $output;
?>
And my jquery function is here
getcamera();
function getcamera(){
$.ajax({
type:"POST",
url:'../ajaxfiles/ajax_getcamera.php',
success:function(data){
$('#live_data').html(data);
}
});
}
This above code is work properly but search box and pagination is not display
so how to solve that problem???
`getcamera();
function getcamera(){
$.ajax({
type:"POST",
url:'../ajaxfiles/ajax_getcamera.php',
success:function(data){
$('#live_data').html(data);
$('#example').DataTable();// Add this line.
}
});
}`
Above code will work. This is not the best solution.
For good ajax implementation you can see example usages at
https://datatables.net/examples/ajax/simple.html And https://datatables.net/examples/server_side/simple.html
I want the external CSS to be applied on ajax response.
I am trying to create a page where after user selects options in a form and submits it then another form is loaded via ajax. But CSS is not applying on the ajax response.
I could not figure out the mistake. Please correct me if the approach is not correct.
$('#getStudents').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'feature1/getStudents.php',
type: 'POST',
data: $('#getStudents').serialize(),
cache: false,
success: function(returndata) {
//alert(returndata);
$("#listStudents").html(returndata);
}
});
});
Here is the problem. On the 4th column css is not applying. The check box should appear as ios switch (http://abpetkov.github.io/switchery/)
<?php
$output='';
$output = $output. '
<div class="panel panel-white">
<div class="panel-heading clearfix">
<h3 class="panel-title"> Students </h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="students" class="display table" style="width: 100%; cellspacing: 0;">
<thead>
<tr>
<th> ID</th>
<th>Student ID</th>
<th>Name</th>
<th>Attendance</th>
</tr>
</thead>
<tfoot>
<tr>
<th> ID</th>
<th>Student ID</th>
<th>Name</th>
<th>Attendance</th>
</tr>
</tfoot>
<tbody>';
$i=1;
while($data = mysqli_fetch_assoc($results)) {
$output = $output. '<tr>
<td>'.$i++.'</td>
<td>'.$data["id"].'</td>
<td>'.$data["id"].'</td>
<td>
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right fixed-header-check" checked>
</div>
</td>
</tr>';
}
$output = $output. '
</tbody>
</table>
</div>
</div>
</div>';
echo $output;
mysqli_close($con);
?>
this is because your html page where you include all the css are loaded as the document is ready..it reads all classes and according to the style sheet it applies on that.. but in ajax we load the other page on the same html page and this time browser not map the html classes to the style sheet that is why your css is not applying on that
As I Can Understand , you are using an external JQuery Table Plugin and all the data (rows) are being fetched by AJAX Call.
You can use this setup[Backup your Previous File]:
What I am trying to do is: fetching only the required rows in AJAX call(not complete table). All the table structures and CSS are already loaded and on form Submission trying to fetch required rows. In your case the browser doesn't able to dynamically render the Table and CSS.
1. dashboard.php
<html>
<head>
<!-- Link to Plugin CSS-->
<!--Link to Your Custom CSS -->
<head>
<body>
//HTML and PHP code Here
<!-- Link to Plugin Script-->
<script>
// AJAX CALL
$('#getStudents').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'feature1/getStudents.php',
type: 'POST',
data: $('#getStudents').serialize(),
cache: false,
success: function(returndata) {
//alert(returndata);
$("#students").html(returndata); //Fetch rows Only Not table(See the Next home.php page)
}
});
});
</script>
</body>
</html>
2. home.php
<div class="row">
<div class="panel panel-white">
<div class="panel-heading clearfix">
<h3 class="panel-title"> Students </h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="students" class="display table" style="width: 100%; cellspacing: 0;">
</table>
</div>
</div>
</div>
</div>
3. getStudents.php
In this page Modify $output variable.
Like
$output='';
$output = $output. '
<thead>
<tr>
<th> ID</th>
<th>Student ID</th>
<th>Name</th>
<th>Attendance</th>
</tr>
</thead>
<tfoot>
<tr>
<th> ID</th>
<th>Student ID</th>
<th>Name</th>
<th>Attendance</th>
</tr>
</tfoot>
<tbody>';
$i=1;
while($data = mysqli_fetch_assoc($results)) {
$output = $output. '<tr>
<td>'.$i++.'</td>
<td>'.$data["id"].'</td>
<td>'.$data["id"].'</td>
<td>
<div class="ios-switch pull-right switch-md">
<input type="checkbox" class="js-switch pull-right fixed-header-check" checked>
</div>
</td>
</tr>';
}
$output = $output. '
</tbody></div>';
OOps..It isn't the css problem. It's javascript that caused the problem.
Actually, the switchery.min.js appends a div with class switchery to . Because the script isn't initialised the rendering has failed.
Now adding the following javascript at the end of getStudents.php solved the issue.
echo '<script language="javascript">
if (Array.prototype.forEach) {
var elems = Array.prototype.slice.call(document.querySelectorAll(".js-switch"));
elems.forEach(function(html) {
var switchery = new Switchery(html);
});
} else {
var elems = document.querySelectorAll(".js-switch");
for (var i = 0; i < elems.length; i++) {
var switchery = new Switchery(elems[i]);
}
}
</script>';
I'm new to Angularjs. I'm trying to call function onclick of the buttons. I used ng-click but it's not working. These buttons are dynamically created.
I'm implementing this application in CodeIgniter framework. Here is my code;
//view
<section class="content" ng-app="manageApp">
<div growl></div>
<div class="row" ng-controller="customerManageController">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Customers Information</h3>
</div>
<div class="box-body">
<table class="table table-striped table-bordered" id="customer_table" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>City</th>
<th>Email</th>
<th>Address1</th>
<th>Address2</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>City</th>
<th>Email</th>
<th>Address1</th>
<th>Address2</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
//js file
var manageApp = angular.module('manageApp', ['ngRoute', 'angular-growl', 'ngAnimate']);
manageApp.controller('customerManageController', function ($scope, $http, growl) {
$http({
method: 'POST',
url: 'list_customers',
headers: {
"Content-Type": "application/json"
},
}).success(function (data) {
for(var i=0; i<data.length; i++) {
var tableBody = tableBody+('<tr id="'+data[i].id+'"><td>'+data[i].id+'</td><td>'+data[i].name+'</td><td>'+data[i].mobile+'</td><td>'+data[i].city+'</td><td>'+data[i].email+'</td><td>'+data[i].address1+'</td><td>'+data[i].address2+'</td><td><button ng-click="deleteFunc()" class="btn btn-danger"><i class="fa fa-trash" aria-hidden="true"></i></button></td></tr>');
}
$('#tableBody').html(tableBody);
$('#customer_table').DataTable();
});
$scope.deleteFunc = function () {
alert('here');
}
});
The problem is you're inserting new HTML that won't be bound to the controller. Anytime you insert new HTML code with Angular directives that isn't compiled, like you did with JQuery, it won't be bound to the controller unless you use the $compile function to bind it.
There is a way you can do this with your code but instead this should be refactored. You're waiting for data from a POST request before you render it. Instead of binding the HTML after you get the data (this is where $compile would be required) you can instead make use of a $scope which will contain an array of the data and render the HTML based on what is in that array.
The code would look like this:
<section class="content" ng-app="manageApp">
<div growl></div>
<div class="row" ng-controller="customerManageController">
<div class="col-md-12">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Customers Information</h3>
</div>
<div class="box-body">
<table class="table table-striped table-bordered" id="customer_table" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>City</th>
<th>Email</th>
<th>Address1</th>
<th>Address2</th>
<th>Action</th>
</tr>
</thead>
<!-- Table now populates with data after it's received -->
<tbody id="tableBody">
<div ng-repeat="for data in receivedData">
<tr id="{{ data.id }}>
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.mobile}}</td>
<td>{{data.city}}</td>
<td>{{data.email}}</td>
<td>{{data.address1}}</td>
<td>{{data.address2}}</td>
<td>
<button ng-click="deleteFunc()" class="btn btn-danger">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</td>
</tr>
</div>
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>City</th>
<th>Email</th>
<th>Address1</th>
<th>Address2</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
JavaScript:
var manageApp = angular.module('manageApp', ['ngRoute', 'angular-growl', 'ngAnimate']);
manageApp.controller('customerManageController', function ($scope, $http, growl) {
// This will hold the data
$scope.receivedData = [];
$http({
method: 'POST',
url: 'list_customers',
headers: {
"Content-Type": "application/json"
},
}).success(function (data) {
// If here there is data, show it.
if (data.length > 0) {
$scope.receivedData = data;
}
}
});
$scope.deleteFunc = function () {
alert('here');
}
});
I am getting from the database data in a PHP table bootstrap. What I want is to do the pagination now, because the table I get is to long, and I want to have for example 6 rows/page. This is my code with DataTables Plugin but it's not working :/ Can anyone help me?
<html>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.11.1.min.js"></script >
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<div class="container">
<div class="row vertical-center-row">
<div class="col-lg-12">
<div class="row">
<div class="table-responsive">
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-xs-offset-4">
<table id="table" class="table table-striped" cellspacing="0" width="100%">
<h3>Update/Remove Access Rights</h3>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Surname</th>
<th>Nickname</th>
<th> Door Description </th>
</tr>
</thead>
<tbody>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#table').dataTable( {
"pagingType": "full_numbers"
} );
} );
</script>
<?php
$stmt="select id_access_rights,name,surname,nickname, description
from users
join access_rights on users.rfidcode=access_rights.users_rfidcode
join doors
on doors.id_doors=access_rights.doors_id_doors
order by name ";
$result=$conn->query($stmt);
if($result === FALSE) {
die(mysqli_error()); // TODO: better error handling
}
while($row =$result->fetch_assoc()){
$f1=$row['id_access_rights'];
$f2=$row['name'];
$f3=$row['surname'];
$f4=$row['nickname'];
$f5=$row['description'];
?>
<tr>
<td><?php echo $f1 ?>
<td><?php echo $f2 ?>
<td><?php echo $f3 ?>
<td><?php echo $f4 ?>
<td><?php echo $f5 ?>
<td><?php echo "<a href='updateAccessRights.php?id_access_rights=" . htmlentities($f1). "'>Update";?>
<td><?php echo "<a href='deleteAccessRights.php?id_access_rights=" . htmlentities($f1). "'>Remove";?>
</td>
<?php
}
?>
</tr>
</table>
</tbody>
</table>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can make use of Data Tables
Javascript Code
$(document).ready(function() {
$('#example').dataTable();
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
//code.jquery.com/jquery-1.11.1.min.js
//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js
//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js
HTML Code
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
CSS Code -
body { font-size: 140%; }
The following CSS library files are loaded for use in this example to provide the styling of the table:
//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css
Please refer this for further details -
https://datatables.net/examples/styling/bootstrap.html
You need to use datatables, javascript plugin.
https://www.datatables.net/