i want to replace a java script with php to fill the data table from the db
or just how to fill this table from the mysql db using php.
here is the datatable :
alladmins.php :
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Admins</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="adminTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>ADMIN ID</th>
<th>USER NAME</th>
<th>Password</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="ad">
</tbody>
<tfoot>
<tr>
<th>ADMIN ID</th>
<th>USER NAME</th>
<th>Password</th>
<th>Delete</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.box-body -->
</div>
</div>
<!-- /.col -->
<script>createTable('#adminTable');</script>
this is the script in the index.php :
<script>
var createTable = function(el){
if ( $.fn.DataTable.isDataTable(el) ) {
$(el).DataTable().destroy();
}
// table: "#adminTable",
$(el+' tbody').empty();
var arrayOfAdmins = [{id:1,username:"asdasd",password:"asd"},
{id:1,username:"asdasd",password:"asd"}];
for (i=0; i<arrayOfAdmins.length;i++){
$("#adminTable").append(
'<tr><td>'+ arrayOfAdmins[i].id
+'</td><td>'+ arrayOfAdmins[i].username
+'</td><td>'+ arrayOfAdmins[i].password
+'</tr>'
);}
$(el).DataTable();
};
$('.tableSearch').val('a').trigger('#adminTable');
$(document).ready(function(e){
var navigate = function(location){
$('#appMain').load(location,function(){
});
};
/* NAVIGATION */
$('ul.treeview-menu a').on('click',function(e){
e.preventDefault();
var location = $(e.target).attr('href');
navigate(location);
});
navigate('templates/index2.php');
});
</script>
Related
I have a unique error and I am not able to fix it. The thing is, I have a timesheet table that let me add multiple data inside. I want it only to be on Table #1, but as soon as I click the + sign in my table, the same data keeps on showing in my Table #2. I already checked different sites about this. But I cannot find the proper answer. Please help me.
This is the code for my Table #1
$(function () {
var TABLE = $(".table");
//start time
var start_time;
var end_time;
var break_time_start;
var break_time_end;
var end_time;
var add_time;
var hours_array = [];
var minutes_array = [];
$('.table').on('change', '.appt1', function () {
start_time = $(this).val();
});
//break time start
$('.table').on('change', '.appt2', function () {
break_time_start = $(this).val();
});
//break time finish
$('.table').on('change', '.appt3', function () {
break_time_end = $(this).val();
});
$('.table').on('change', '.appt4', function () {
end_time = $(this).val();
let end_time_with_date = moment(end_time, 'HH:mm:ss');
let start_time_with_date = moment(start_time, 'HH:mm:ss');
let break_time_start_with_date = moment(break_time_start, 'HH:mm:ss');
let break_time_end_with_date = moment(break_time_end, 'HH:mm:ss');
//computeTime(start_time,break_time_start,break_time_end,end_time)
let compute_hours_break_time = break_time_end_with_date.diff(break_time_start_with_date, 'hours');
let compute_minutes_break_time = parseInt(moment.utc(moment(break_time_end_with_date, "HH:mm:ss").diff(moment(break_time_start_with_date, "HH:mm:ss"))).format("mm"))
let compute_hours = end_time_with_date.diff(start_time_with_date, 'hours') - compute_hours_break_time;
let compute_minutes = parseInt(moment.utc(moment(end_time_with_date, "HH:mm:ss").diff(moment(start_time_with_date, "HH:mm:ss"))).format("mm")) - compute_minutes_break_time
$(this).closest('tbody tr').find('td:eq(8)').text(compute_hours)
$(this).closest('tbody tr').find('td:eq(9)').text(compute_minutes)
});
function compute(element) {
let hours_sum = 0;
let minutes_sum = 0;
$(".total_hours_hidden").each(function () {
console.warn(parseInt($(this).text()))
hours_sum += parseInt($(this).text());
})
$(".total_minutes_hidden").each(function () {
minutes_sum += parseInt($(this).text());
})
$(".total_hours_worked").text(hours_sum);
$(".total_minutes_worked").text(minutes_sum);
}
$(".compute_button").click(function () {
compute();
})
//end calculation code
$(".table-add").click(function () {
console.log('adding');
var clone = TABLE
.find("tr.hide")
.clone(true)
.removeClass("hide table-line");
TABLE.append(clone);
});
$(".table-remove").click(function () {
$(this)
.parents("tr")
.detach();
compute();
});
})
and this is on my Table Html file.
<div class="card-body">
<div id="table" class="table-editable">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table table-bordered table-responsive-md table-striped text-center">
<tbody>
<tr>
<th>DATE</th>
<th>START TIME</th>
<th>SITE NAME</th>
<th>TASK</th>
<th>OTHERS</th>
<th>BREAK TIME START</th>
<th>BREAK TIME FINISH</th>
<th>END TIME</th>
<th style="display:none">HOURS HIDDEN</th>
<th style="display:none">Minutes HIDDEN</th>
</tr>
</tbody>
<tbody>
<!-- This is our clonable table line -->
<tr class="hide">
<td><input type="date" size="1" class="date"></td>
<td><input type="time" class="appt1" name="appt" required=""></td>
<td><input type="text" size="10"></td>
<td><input type="text" size="10"></td>
<td><input type="text" size="10"></td>
<td><input type="time" class="appt2" id="appt2" name="appt" required=""></td>
<td><input type="time" class="appt3" id="appt3" name="appt" required=""></td>
<td><input type="time" class="appt4" id="appt4" name="appt" required=""></td>
<td class="total_hours_hidden" style="display:none">0</td>
<td class="total_minutes_hidden" style="display:none"> 0</td>
<td class="table-remove"> x</td>
</tr>
</tbody>
</table>
</div>
<button class="compute_button">
Calculate
</button>
<table style="width: 100%">
<colgroup>
<col span="1" style="width: 15%;">
<col span="1" style="width: 70%;">
</colgroup>
<tbody>
<tr>
<th>Total Hours: </th>
<th>
<div class="total_hours_worked" style="display:inline"></div>:
<div class="total_minutes_worked" style="display:inline"></div>
</th>
</tr>
</tbody>
</table>
</div>
and this is for table #2.
<div class="card" id="oncallTable" style="display:none">
<h3 class="card-header text-center font-weight-bold text-uppercase py-4">
ON CALL TIME SHEET
</h3>
<!-- Start of scrollable box -->
<div class="card-body">
<div id="" class="table-editable">
<!-- <span class="table-add glyphicon glyphicon-plus"></span> -->
<table class="table table-bordered table-responsive-md table-striped text-center">
<tbody>
<tr>
<th>DATE</th>
<th>START TIME</th>
<th>SITE NAME</th>
<th>TASK</th>
<th>OTHERS</th>
<th>BREAK TIME START</th>
<th>BREAK TIME FINISH</th>
<th>END TIME</th>
<th style="display:none">HOURS HIDDEN</th>
<th style="display:none">Minutes HIDDEN</th>
</tr>
</tbody>
</table>
</div>
</div>
Thank you for helping me.
This is because both your tables table#1 and table#2 have the class name 'table'. So your code:
var TABLE = $(".table");
is referencing to both the tables because of which your code:
TABLE.append(clone);
will append the data to be appended to both the tables.
Instead, you could provide your table#1 a unique id as:
<table id="table-1" class="table table-bordered table-responsive-md table-striped text-center">
and in your TABLE variable you can select table#1 as:
var TABLE = $("#table-1");
That would pretty much fix the issue.
i'm using a bootstrap table and need to load new data each time I click on a button, I don't want to keep old data.
I could load data using this below code but old data still there, I tried "load" instead of append like this $('#matable tbody').load(rows); it doesn't work
var rows = $("<tr><td style=\"display:none;\">1</td><td>E</td><td>E</td><td>E</td></tr>");
$("#Mybutton").click(function()
$('#matable tbody').append(rows);
});
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table id="matable" class="table table-striped table-bordered first">
<thead>
<tr>
<th style="display:none;">ID</th>
<th>Date</th>
<th>Flux name</th>
<th>Description</th>
</tr>
</thead>
<tfoot>
<tr>
<th style="display:none;">ID</th>
<th>Date</th>
<th>Flux name</th>
<th>Description</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<div class="row-fluid padTop5">
<div class="col-12">
<div class="row" *ngIf="showFiles">
<div class="col-12 colBorder">
<table datatable class="table table-striped centerAlign">
<thead>
<tr>
<th class="centerAlign">Select All<input type="checkbox" [(ngModel)]="fileSelectAll" name="fileSelectAll" class="d-block" (change)="selectAll($event,fileSelectAll)"></th>
<th>TestCase Name</th>
<!-- <th>Provision Name</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let file of fileList;let i =index">
<td>
<input type="checkbox" [(ngModel)]="file.selected" [checked]="isSelected" (change)='checkClicked($event,file)' name="cb">
</td>
<td>{{file.name}}</td>
<!-- <td>PE</td> -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I am using angular datatables ..the table is forming when the user selects the file from local.works fine for the first time..but when the user again selects the file previous records are not gone..how to. Refresh the table
I want to get all tr id and register it to jQuery array,
this is my table code:
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1"><td></td>
<tr id="2"><td></td>
</tbody>
</table>
</div>
How to get that all id and assign them to jQuery array?
I want to use it for check what value is exist in table row?
So what I want is get all tr id and assign them to jQuery array.
Iterate over tr in tbody and push it to an array
var arr = [];
$("#tbodytmpitem tr").each(function() {
arr.push(this.id);
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1">
<td></td>
<tr id="2">
<td></td>
</tbody>
</table>
</div>
Use .map() to iterate over all the tr and return their IDs. Then use $.makeArray() to convert the result into an array.
var array = $.makeArray($('tbody tr[id]').map(function() {
return this.id;
}));
console.log(array);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1">
<td></td>
<tr id="2">
<td></td>
</tbody>
</table>
</div>
I have a bootstrap page with a table loaded from a MySQL db. The table shows but it doesn't show up with the desired format.
The table is set up here.
<script type ="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#job_table').DataTable();
} ); >
</script>
<table id="job_table"
class = "table dataTable"
data-pagination ="true">
<thread>
<tr>
<th>#</th>
<th>Job Title </th>
<th>Company</th>
<th>Salary</th>
<th>Location</th>
<th>Date Posted</th>
</tr>
</thread>
<tbody>
<?php
$result = mysqli_query($link,"Select * From Jobs");
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
?>
<tr class="info">
<td></td>
<td><?=$row['job_id']?></td>
<td><?=$row['name']?></td>
<td><?=$row['comp_name']?></td>
<td><?=$row['pay']?></td>
<td><?=$row['location']?></td>
<td><?=$row['date_posted']?></td> </tr>
<?php
}
?>
</tbody>
This is what i have in the header section
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="starter-template.css" rel="stylesheet">
<script src="bootstrap/js/respond.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
The table displays data but the pagination setting in the table doesn't do anything when added. The Javascript I have to set up the table in the dataTable doesn't do anything either. I"m not sure what i'm missing.
This is the source of the html table. The rest was omitted because this table has about 500 rows of data.
<div class="tab-pane" id="joblist">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Active Employment Listings</h3>
</div>
<script type ="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#job_table').DataTable();
} ); >
</script>
<table id="job_table"
class = "table dataTable"
data-pagination ="true">
<thead>
<tr>
<th>#</th>
<th>Job Title </th>
<th>Company</th>
<th>Salary</th>
<th>Location</th>
<th>Date Posted</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td></td>
<td>1</td>
<td>VP Marketing</td>
<td>Devify</td>
<td>22.38</td>
<td>222 Lillian Hill</td>
<td>2015-02-17</td>
</tr>
<tr class="info">
<td></td>
<td>2</td>
<td>Administrative </td>
<td>Skiba</td>
<td>10.92</td>
<td>3 Corscot Terrace</td>
<td>2015-02-03</td>
</tr>