I just want to know how can i fetch the design of the datatables of my table. Because the filter and the pagination of the table is not working. Heres my code.
i have this plugin in my
<link rel="stylesheet" href="../assets/vendor/datatables-bootstrap/dataTables.bootstrap.css">
<link rel="stylesheet" href="../assets/vendor/datatables-fixedheader/dataTables.fixedHeader.css">
<link rel="stylesheet" href="../assets/vendor/datatables-responsive/dataTables.responsive.css">
<link rel="stylesheet" href="../assets/vendor/datatables-bootstrap/dataTables.bootstrap.css">
<link rel="stylesheet" href="../assets/vendor/datatables-fixedheader/dataTables.fixedHeader.css">
<link rel="stylesheet" href="../assets/vendor/datatables-responsive/dataTables.responsive.css">
<script src="../assets/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="../assets/vendor/datatables-fixedheader/dataTables.fixedHeader.js"></script>
<script src="../assets/vendor/datatables-bootstrap/dataTables.bootstrap.js"></script>
<script src="../assets/vendor/datatables-responsive/dataTables.responsive.js"></script>
<script src="../assets/vendor/datatables-tabletools/dataTables.tableTools.js"></script>
display
<div id="table_data" >
</div>
script
fetch_data();
function fetch_data()
{
var action = "fetch";
$.ajax({
url:"table/serviceTypeTable.php",
method:"POST",
data:{action:action},
success:function(data)
{
$('#table_data').html(data);
}
})
}
query for fetch:
if(isset($_POST["action"]))
{
if($_POST["action"] == "fetch")
{
$qry = mysql_query("select * from services_type")or die(mysql_error());
$count = mysql_num_rows($qry);
$output = '
<table class="table table-hover dataTable table-striped width-full" data-plugin="dataTable">
<thead>
<th>Services Types</th>
<th>Action</th>
</thead>
';
while($row = mysql_fetch_array($qry))
{
$services_type_id = $row['services_type_id'];
$output .= '
<tbody>
<tr>
<td>'.$row['services_type_name'].'</td>
<td style="text-align:center;">
<i class="fa fa-edit"></i>
</td>
</tr>
</tbody>
';
}
$output .= '</table>';
echo $output;
}
}
my problem is the datatables design is not working. that's all thanks :)
I figured it out. I just put this script in query fetch at the button after the
:)
<script>
$("#table").dataTable({
});
</script>
Related
I have one table fetching data from database and displaying on page using PHP. i have created pagination using Ajax,PHP and MySQL. but when i am clicking on the page numbers, some time it is working and some time the table is displaying records on the first page irrespective of the page i clicked.please help me to solve this issue, i am trying since long time to resolve the issue and i could not. My main page is as follows.....
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Load Data without page refresh</title>
<!--<link rel="stylesheet" href="style/css/bootstrap.min.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!--<script src="scripts/js/bootstrap.min.js"></script>-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--<script src="scripts/js/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h3 align="center">Pagintation without page refresh</h3>
<div class="table-responsive" id="pagination_data">
</div>
</div>
</body>
</html>
<script>
$(document).ready(function() {
load_data();
function load_data(page) {
$.ajax({
url: "pagination.php",
method: "POST",
data: {
page: page
},
success: function(data) {
$('#pagination_data').html(data);
}
})
}
$(document).on('click', '.pagination_link', function() {
var page = $(this).attr("id");
//alert(page);
load_data(page);
});
});
</script>
pagination.php
<?php
//pagination.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$record_per_page = 5;
$page = '';
$output = '';
if(isset($_POST["page"]))
{
$page = $_POST["page"];
}
else
{
$page = 1;
}
$start_from = ($page - 1)*$record_per_page;
$query = "SELECT * FROM tbl_student ORDER BY student_id DESC LIMIT $start_from, $record_per_page";
$result = mysqli_query($connect, $query);
$output .= "
<table class='table table-bordered'>
<tr>
<th width='50%'>Name</th>
<th width='50%'>Phone</th>
</tr>
";
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["student_name"].'</td>
<td>'.$row["student_phone"].'</td>
</tr>
';
}
$output .= '</table><br /><div align="center">';
$page_query = "SELECT * FROM tbl_student ORDER BY student_id DESC";
$page_result = mysqli_query($connect, $page_query);
$total_records = mysqli_num_rows($page_result);
$total_pages = ceil($total_records/$record_per_page);
for($i=1; $i<=$total_pages; $i++)
{
$output .= "<span class='pagination_link' style='cursor:pointer; padding:6px; border:1px solid #ccc;' id='".$i."'>".$i."</span>";
}
$output .= '</div><br /><br />';
echo $output;
?>
what happen in the code is that everytime i choose in multiple drop down it fetch the data what i want to happen is to click the button first then it will fetch the data...... thank u guys got the code in here https://www.webslesson.info/2018/05/ajax-live-data-search-using-multi-select-dropdown-in-php.html
<?php
//index.php
$connect = new PDO("mysql:host=localhost;dbname=db", "root", "");
$query = "SELECT DISTINCT Country FROM tbl_customer ORDER BY Country ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Live Data Search using Multi Select Dropdown in PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-select.min.css" rel="stylesheet" />
<script src="js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<br />
<h2 align="center">Ajax Live Data Search using Multi Select Dropdown in PHP</h2><br />
<select name="multi_search_filter" id="multi_search_filter" multiple class="form-control selectpicker">
<?php
foreach($result as $row)
{
echo '<option value="'.$row["Country"].'">'.$row["Country"].'</option>';
}
?>
</select>
<input type="hidden" name="hidden_country" id="hidden_country" />
<div style="clear:both"></div>
<br />
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br />
<br />
<br />
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data(query='')
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('tbody').html(data);
}
})
}
$('#multi_search_filter').change(function(){
$('#hidden_country').val($('#multi_search_filter').val());
var query = $('#hidden_country').val();
load_data(query);
});
});
</script>
fetch.php
//fetch.php
$connect = new PDO("mysql:host=localhost;dbname=dbattendancelibrary", "root", "");
if($_POST["query"] != '')
{
$search_array = explode(",", $_POST["query"]);
$search_text = "'" . implode("', '", $search_array) . "'";
$query = "
SELECT * FROM tbl_customer
WHERE Country IN (".$search_text.")
ORDER BY CustomerID DESC
";
}
else
{
$query = "SELECT * FROM tbl_customer ORDER BY CustomerID DESC";
}
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$total_row = $statement->rowCount();
$output = '';
if($total_row > 0)
{
foreach($result as $row)
{
$output .= '
<tr>
<td>'.$row["CustomerName"].'</td>
<td>'.$row["Address"].'</td>
<td>'.$row["City"].'</td>
<td>'.$row["PostalCode"].'</td>
<td>'.$row["Country"].'</td>
</tr>
';
}
}
else
{
$output .= '
<tr>
<td colspan="5" align="center">No Data Found</td>
</tr>
';
}
echo $output;
?>
It fires an ajax call because of this code:
$('#multi_search_filter').change(function(){
$('#hidden_country').val($('#multi_search_filter').val());
var query = $('#hidden_country').val();
load_data(query);
});
If you want to fire when clicking on a button, you will need to put in HTML for the button first. Then use the id for load_data event, for example you will have a button called '#btn_search':
$('#multi_search_filter').change(function(){
$('#hidden_country').val($('#multi_search_filter').val());
});
$('#btn_search').click(function(e){
e.preventDefault();
var query = $('#hidden_country').val();
load_data(query);
});
Your full HTML above becomes like this:
<?php
//index.php
$connect = new PDO("mysql:host=localhost;dbname=db", "root", "");
$query = "SELECT DISTINCT Country FROM tbl_customer ORDER BY Country ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Live Data Search using Multi Select Dropdown in PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-select.min.css" rel="stylesheet" />
<script src="js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<br />
<h2 align="center">Ajax Live Data Search using Multi Select Dropdown in PHP</h2><br />
<select name="multi_search_filter" id="multi_search_filter" multiple class="form-control selectpicker">
<?php
foreach($result as $row)
{
echo '<option value="'.$row["Country"].'">'.$row["Country"].'</option>';
}
?>
</select>
<input id="btn_search" type="button" value="Filter" />
<input type="hidden" name="hidden_country" id="hidden_country" />
<div style="clear:both"></div>
<br />
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br />
<br />
<br />
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data(query='')
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('tbody').html(data);
}
})
}
$('#multi_search_filter').change(function(){
$('#hidden_country').val($('#multi_search_filter').val());
});
$('#btn_search').click(function(e){
e.preventDefault();
var query = $('#hidden_country').val();
load_data(query);
});
});
</script>
Im trying to read data from my database to my view in my application in the web browser. Problem is that I can't get any data to show. The data is shown in the console, so it's connecting to the database but somehow it doesn't print the data in the view.
Data is showing in console but not in view
playerDetails.php
include 'database_connections.php';
$sql = "SELECT idPlayer, PlayerName, PlayerEmail, PlayerPassword,
PlayerTeam FROM Players";
$result = mysqli_query($conn, $sql);
$data = array();
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
} else {
echo "0 results";
}
mysqli_close($conn);
echo json_encode($data);
angular-script.js (Controller)
var crudApp = angular.module('crudApp',[]);
crudApp.controller('DbController', function ($scope, $http) {
$http.get("DatabaseFiles/playerDetails.php")
.then(function (response) {$scope.players = response.data;
console.log(response.data)
});
});
HTML
<!doctype html>
<html ng-app='crudApp'>
<head>
<title>Crud app</title>
<script src="js/jQuery/jquery.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
</head>
<body>
<div ng-controller="DbController">
<table >
<tr>
<th>Player ID</th>
<th>Name</th>
<th>Email</th>
<th>Password</th>
<th>Team</th>
</tr>
<tr ng-repeat="players in Players | orderBy:'-created'">
<td>{{players.idPlayer}}</td>
<td>{{players.PlayerName}}</td>
<td>{{players.PlayerEmail}}</td>
<td>{{players.PlayerPassword}}</td>
<td>{{players.PlayerTeam}}</td>
</tr>
</table>
</div>
<script src="js/angular-script.js"></script>
</body>
SOLVED
Im not sure what caused the problem but I created a new database and a new project and did the following changes to my PlayerController.js (former "angular-script.js") and index.html
PlayerController.js
var app = angular.module('crudApp', []);
app.controller('mainController', function($scope, $http) {
$http.get('PlayerRead.php').then(function(response) {
$scope.users = response.data;
console.log(response.data);
});
});
HTML
<!doctype html>
<html >
<head>
<title>Crud app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/
angularjs/1.6.4/angular.min.js"
></script>
</head>
<body ng-app="crudApp" ng-controller="mainController">
<table>
<tr>
<th>Player ID</th>
<th>Name</th>
<th>Email</th>
<th>Team</th>
</tr>
<tr ng-repeat="user in users track by $index">
<td>{{user.PlayerID}}</td>
<td>{{user.PlayerName}}</td>
<td>{{user.PlayerEmail}}</td>
<td>{{user.PlayerTeam}}</td>
</tr>
</table>
<script src="PlayerController.js"></script>
</body>
Make it as below line, as it is case sensitive.
<tr ng-repeat="player in players | orderBy:'-created'">
<td>{{player.idPlayer}}</td>
<td>{{player.PlayerName}}</td>
<td>{{player.PlayerEmail}}</td>
<td>{{player.PlayerPassword}}</td>
<td>{{player.PlayerTeam}}</td>
</tr>
It should be players in players | orderBy:'-created'
I am currently working on a project that shows data from an SQL table using bootstrap editable for live editing.
It works fine - changes are transferred to the SQL table. What is already working?:
Showing current value from SQL table
Providing a drop-down for selection
Transferring changed values to SQL table
-> BUT Part 3 (transferring changed value) is only working for free-text input (class xedit).
What I am looking for is the code for: transferring chosen value of drop-down-list to SQL-Table
Here is the HTML-code:
<?php
include("connect.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div style="text-align:center;width:100%;font-size:24px;margin-bottom:20px;color: #2875BB;">EDIT YOUR CHARACTERS</div>
<div class="row">
<table class= "table table-striped table-bordered table-hover">
<thead>
<tr>
<th colspan="1" rowspan="1" style="width: 180px;" tabindex="0">NAME</th>
<th colspan="1" rowspan="1" style="width: 220px;" tabindex="0">ROLE</th>
<th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">SECOND ROLE</th>
</tr>
</thead>
<tbody>
<?php
$query = mysql_query("SELECT * FROM characters");
$i=0;
while($fetch = mysql_fetch_array($query))
{
if($i%2==0) $class = 'even'; else $class = 'odd';
echo'<tr class="'.$class.'">
<td class="xedit" id="'.$fetch['id'].'" key="name">'.$fetch['name'].'</td>
<td class="xedit" id="'.$fetch['id'].'" key="role">'.$fetch['role'].'</td>
<td class="xedit2" id="'.$fetch['id'].'" key="secondrole">'.$fetch['secondrole'].' </td>
</td>
</tr>';
}
?>
</tbody>
</table>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-editable.js" type="text/javascript"></script>
<script>
$(function(){
$('.rolestatus').editable({
source: [
{value: 1, text: 'DD'},
{value: 2, text: 'HEAL'},
{value: 3, text: 'TANK'}
]
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('.xedit').editable();
$(document).on('click','.editable-submit',function(){
var key = $(this).closest('.editable-container').prev().attr('key');
var x = $(this).closest('.editable-container').prev().attr('id');
var y = $('.input-sm').val();
var z = $(this).closest('.editable-container').prev().text(y);
$.ajax({
url: "process.php?id="+x+"&data="+y+'&key='+key,
type: 'GET',
success: function(s){
if(s == 'status'){
$(z).html(y);}
if(s == 'error') {
alert('Error Processing your Request!');}
},
error: function(e){
alert('Error Processing your Request!!');
}
});
});
});
</script>
</div>
</body>
</html>
Here is the process.php code
<?php
include("connect.php");
if($_GET['id'] and $_GET['data'])
{
$id = $_GET['id'];
$data = $_GET['data'];
$key = $_GET['key'];
if(mysql_query("update characters set $key='$data' where id='$id'"))
echo 'success';
}
?>
So does anybody know how I can transfer the chosen dropdown-value (class -> xedit2) to SQL table?
Hope you can help!
Not sure exacly how x-editable works
But in first look i think that the type of your ajax should be "POST" if you want to update some data. And in my opinion you have syntax error in your sql query near "$key"
I was wondering if it is possible for me to add a dropdown into the Associated Floor Plans section of the table. In this dropdown I'd like to add other URL's that are stored in the database. Would I be creating a new column in the database to call the additional URL's that are stored in Google Drive and how would I go about creating a dropdown showing all the files associated with that floor.
It's an extremely particular question seeing as it would be calling additional items from the database into what in essence is the same column.
Thank you for your instance. Also, feel free to critique the methods I've used in my code.
<?php
$con = mysql_connect("localhost", "root", "root");
if(!$con){
die("Error: ".mysql_error());
}
mysql_select_db("Test_Data", $con);
$result = mysql_query("SELECT * FROM Test_DataSet");
?>
<html>
<head>
<title>TEST TABLE</title>
<meta http-equiv="Content-Type" content="text/hmtl; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="DataTables-1.10.1/media/js/jquery.js" type="text/javascript"></script>
<script src="DataTables-1.10.1/media/js/jquery.DataTables.js" type="text/javascript"></script>
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<style type="text/css">
#import "DataTables-1.10.1/media/css/jquery.dataTables.css";
</style>
<style type="text/css">
#import "DataTables-1.10.1/examples/resources/bootstrap/3/dataTables.bootstrap.css";
</style>
<script type="text/javascript" charset="UTF-8">
$(document).ready(function(){
$('#datatables').dataTable();
})
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script>
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 1600,
maxHeight : 1200,
fitToView : true,
width : '100%',
height : '100%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
<script>
jQuery(document).ready(function () {
$('a.modalGeneric').fancybox({
type: 'iframe',
fitToView: true,
autoSize: true,
openEffect: 'fade',
openSpeed: 'slow'
});
});
</script>
<style> iframe{border: none; width: 20}</style>
</head>
<body>
<div>
<table id="datatables" class="hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Building</th>
<th>Floor</th>
<th>Number of AP</th>
<th>Associated Floor Plans</th>
<th>View on WebPage</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysql_fetch_assoc($result)){
?>
<tr class ="odd gradeX">
<td><?php echo $row['Building']; ?></td>
<td><?php echo $row['Floor']; ?></td>
<td><?php echo $row['Number_Of_AP']; ?></td>
<td><?php echo '<a class="various fancybox.iframe” href="'.$row['Associated_Floor_Plans'].'" target="_blank">'.$row['Associated_Floor_Plans'].'</a>';?></td>
<td><?php echo '<a class="various fancybox.iframe” href="'.$row['View_On_Webpage'].'" target="_blank">View in AMP<'.$row['View_On_Webpage'].'</a>';?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</body>
</html>