I need datatable to be implemented in my project. I wanna show total number at the bottom of the table like below:
I already make default data table like this :
This is my code.
<?php
include "db.php";
$obj->tglan=$obj->get_hari();
if (isset($_POST['tanggal2'])) {
$obj->tglan = $_POST['tanggal2'];
}
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="assets/DataTables/media/js/jquery.js"></script>
<script type="text/javascript" src="assets/DataTables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/DataTables/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="assets/DataTables/media/css/dataTables.bootstrap.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="assets/datepicker/css/bootstrap-datepicker3.css"/>
</head>
<body>
<center>
<h3>Daftar SPTA<br><?php echo $obj->tanggal("D, j M Y",$obj->tglan);?></h3>
</center>
<left>
<h5>   Last refreshed : <?php echo $obj->tanggal("D, j M Y",$obj->tglan)." ".date("H:i:s");?></h5>
</left>
<br/>
<form action="viewLaporanUtama2.php" method="POST">
<div class="form-group" >
<label for="tanggal">   Tanggal</label>
<input type="text" name="tanggal1" class="tanggal" id="myText" required/>
<input type="submit" name="enter" value="Cari" class="btn btn-info btn-sm">
</div>
</form>
<div class="container-fluid">
<div class="table-responsive">
<table border = '0' class="table table-striped table-bordered data" id="tabelSpta">
<thead>
<tr>
<th>No</th>
<th>No SPTA</th>
<th>No Register Induk</th>
<th>Nama Petani</th>
<th>Gawang/Pos</th>
<th>Timbang Bruto</th>
<th>Giling</th>
<th>Timbang Tarra</th>
<th>Netto(kw)</th>
<th>Kode Rafraksi</th>
<th>Potongan (kw)</th>
<th>Netto Akhir (kw)</th>
</tr>
</thead>
<tbody>
<div id="bagReload">
<?php
echo $obj->tampilLaporan();
?>
</div>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var tabel = $('.data').DataTable();
});
</script>
<!-- <script src="js/jquery-3.2.1.min.js"></script> -->
<script src="assets/js/bootstrap.js"></script>
<script src="assets/datepicker/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.tanggal').datepicker({
format: "yyyy-mm-dd",
autoclose:true
});
});
</script>
</html>
I've already searched but, there's few reference but I couldn't understand that
How I can add Total cell and show at the bottom of datatable?
See this example here http://jsbin.com/putiyep/edit?js,output written by bindrid.
http://jsbin.com/putiyep/edit?js,output
Basically it leverages the footerCallback of the API and use the column index of the table and basic math to return your total.
Excerpt of the code (again not my code):
// Table definition
var dtapi = $('#example').DataTable({
data: dataSet,
pageLength: 3,
"deferRender": false,
"footerCallback": function (tfoot, data, start, end, display) {
var api = this.api();
var p = api.column(4).data().reduce(function (a, b) {
return a + b;
}, 0)
$(api.column(4).footer()).html(p);
$("#total").val(p);
},
"order": [1],
"columns": [
// rest of the columns
{ data: "first_name" },
{ data: "last_name" },
{ data: "firstNumber" },
{
data: "secondNumber", render: function (data) {
return '<input type="text" style="width:50px" value="' + data + '">';
}
},
{ data: "rowTotal" }
]
});
Related
I have html table create by a php, I want to sort this table, but no success.
If I create the table inside the html the sort work.
<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container mb-3 mt-3" id="inicio">
</div>
<script>
$(document).ready(function(){
load_list();
$('.mydatatable').DataTable();
function load_list()
{
var action = "data";
$.ajax({
url: "teste.php",
method:"POST",
data:{action:action},
success:function(data)
{
$('#inicio').html(data);
}
})
}
});
</script>
</body>
</html>
Example of table from php:
<?php
if(isset($_POST["action"]))
{
if($_POST["action"]=="data")
{
$output = '
<table class="table table-striped table-bordered mydatatable" style="width: 100%">
<thead>
<tr>
<th>Tittle</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
<tr>
<td>date2</td>
</tr>
</tbody>
</table>
';
echo $output;
}
?>
I think the $('.mydatatable').DataTable(); is in the wrong place, I tried my options but only work if the table is inside the html page. Anyone can help me?
As first A in ajax means asynchronous, then your call to $('.mydatatable').DataTable(); happens before real data is loaded via ajax. You should move call to DataTable to success callback:
success:function(data)
{
// note the order - first you load `html`
$('#inicio').html(data);
// after that you have a `.mydatatable` selector available
$('.mydatatable').DataTable();
}
Table html is not there when you initialize your Datatable.
$(document).ready(function(){
load_list();
function load_list()
{
var action = "data";
$.ajax({
url: "teste.php",
method:"POST",
data:{action:action},
success:function(data)
{
$('#inicio').html(data);
//move this to here
$('.mydatatable').DataTable();
}
})
}
I have a working php form which also has a button that opens a windows to take a fee from an account.
Is it possible to setup an auto print feature where as soon as the form process is done then the user is taken to a print screen. The only solution i could find is to print the whole screen but I would prefer to design the receipt myself. Would FPDF work in this regard?
Below is the Fees.php form code:
<link rel="shortcut icon" href="img/icon.ico" type="image/x-icon"/>
<?php
include("php/dbconnect.php");
$errormsg= '';
if(isset($_POST['save']))
{
$paid = mysqli_real_escape_string($conn,$_POST['paid']);
$submitdate = mysqli_real_escape_string($conn,$_POST['submitdate']);
$transcation_remark =
mysqli_real_escape_string($conn,$_POST['transcation_remark']);
$sid = mysqli_real_escape_string($conn,$_POST['sid']);
$sql = "select fees,balance from student where id = '$sid'";
$sq = $conn->query($sql);
$sr = $sq->fetch_assoc();
$totalfee = $sr['fees'];
if($sr['balance']>0)
{
$sql = "insert into
fees_transaction(stdid,submitdate,transcation_remark,paid)
values('$sid','$submitdate','$transcation_remark','$paid') ";
$conn->query($sql);
$sql = "SELECT sum(paid) as totalpaid FROM fees_transaction WHERE stdid = '$sid'";
$tpq = $conn->query($sql);
$tpr = $tpq->fetch_assoc();
$totalpaid = $tpr['totalpaid'];
$tbalance = $totalfee - $totalpaid;
$sql = "update student set balance='$tbalance' where id = '$sid'";
$conn->query($sql);
echo '<script type="text/javascript">window.location="fees.php?act=1";</script>';
}
}
if(isset($_REQUEST['act']) && #$_REQUEST['act']=="1")
{
$errormsg = "<div class='alert alert-success'><a href='#' class='close'
data-dismiss='alert' aria-label='close'>×</a><strong>Success!</strong>
Fees submit successfully</div>";
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accounts | iBroker Finance</title>
<!-- BOOTSTRAP STYLES-->
<link href="css/bootstrap.css" rel="stylesheet" />
<!-- FONTAWESOME STYLES-->
<link href="css/font-awesome.css" rel="stylesheet" />
<!--CUSTOM BASIC STYLES-->
<link href="css/basic.css" rel="stylesheet" />
<!--CUSTOM MAIN STYLES-->
<link href="css/custom.css" rel="stylesheet" />
<!-- GOOGLE FONTS-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans'
rel='stylesheet' type='text/css' />
<link href="css/ui.css" rel="stylesheet" />
<link href="css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<link href="css/datepicker.css" rel="stylesheet" />
<link href="css/datatable/datatable.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.js"></script>
<script type='text/javascript' src='js/jquery/jquery-ui-1.10.1.custom.min.js'></script>
<script type="text/javascript" src="js/validation/jquery.validate.min.js">
</script>
<script src="js/dataTable/jquery.dataTables.min.js"></script>
</head>
<?php
include("php/header.php");
?>
<div id="page-wrapper">
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h1 class="page-head-line">Manage Accounts
</h1>
</div>
</div>
<?php
echo $errormsg;
?>
<div class="row" style="margin-bottom:20px;">
<div class="col-md-12">
<fieldset class="scheduler-border" >
<legend class="scheduler-border">Search:</legend>
<form class="form-inline" role="form" id="searchform">
<div class="form-group">
<label for="email">Name</label>
<input type="text" class="form-control" id="student" name="student">
</div>
<div class="form-group">
<label for="email"> Date Of Joining </label>
<input type="text" class="form-control" id="doj" name="doj" >
</div>
<div class="form-group">
<label for="email"> Branch </label>
<select class="form-control" id="branch" name="branch" >
<option value="" >Select Branch</option>
<?php
$sql = "select * from branch where delete_status='0' order by branch.branch asc";
$q = $conn->query($sql);
while($r = $q->fetch_assoc())
{
echo '<option value="'.$r['id'].'" '.(($branch==$r['id'])?'selected="selected"':'').'>'.$r['branch'].'</option>';
}
?>
</select>
</div>
<button type="button" class="btn btn-success btn-sm" id="find" > Find
</button>
<button type="reset" class="btn btn-danger btn-sm" id="clear" > Clear
</button>
</form>
</fieldset>
</div>
</div>
<script type="text/javascript">
$(document).ready( function() {
/*
$('#doj').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: false,
dateFormat: 'mm/yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear,
inst.selectedMonth, 1));
}
});
*/
/******************/
$("#doj").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm/yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month
:selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year
:selected").val();
$(this).val($.datepicker.formatDate('MM yy', new Date(year, month,
1)));
}
});
$("#doj").focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});
});
/*****************/
$('#student').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajx.php',
dataType: "json",
data: {
name_startsWith: request.term,
type: 'studentname'
},
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item,
value: item
}
}));
}
});
}
/*,
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var abc = ui.item.label.split("-");
//alert(abc[0]);
$("#student").val(abc[0]);
return false;
},
*/
});
$('#find').click(function () {
mydatatable();
});
$('#clear').click(function () {
$('#searchform')[0].reset();
mydatatable();
});
function mydatatable()
{
$("#subjectresult").html('<table class="table table-striped table-bordered table-hover" id="tSortable22"><thead><tr><th>Name/Contact</th> <th>Premium Amount Incl Stamp Fee</th><th>Oustanding</th><th>Branch</th><th>Joining Date</th><th>Action</th></tr></thead><tbody></tbody></table>');
$("#tSortable22").dataTable({
'sPaginationType' : 'full_numbers',
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
'bProcessing' : true,
'bServerSide': true,
'sAjaxSource':
"datatable.php?"+$('#searchform').serialize()+"&type=feesearch",
'aoColumnDefs': [{
'bSortable': false,
'aTargets': [-1] /* 1st one, start by the
right */
}]
});
}
////////////////////////////
$("#tSortable22").dataTable({
'sPaginationType' : 'full_numbers',
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
'bProcessing' : true,
'bServerSide': true,
'sAjaxSource': "datatable.php?type=feesearch",
'aoColumnDefs': [{
'bSortable': false,
'aTargets': [-1] /* 1st one, start by the right */
}]
});
///////////////////////////
});
function GetFeeForm(sid)
{
$.ajax({
type: 'post',
url: 'getfeeform.php',
data: {student:sid,req:'1'},
success: function (data) {
$('#formcontent').html(data);
$("#myModal").modal({backdrop: "static"});
}
});
}
</script>
<style>
#doj .ui-datepicker-calendar
{
display:none;
}
</style>
<div class="panel panel-default">
<div class="panel-heading">
Account Management
</div>
<div class="panel-body">
<div class="table-sorting table-responsive"
id="subjectresult">
<table class="table table-striped table-bordered
table-hover" id="tSortable22">
<thead>
<tr>
<th>Name/Payment Plan</th>
<th>Premium Amount Incl Stamp
Fee</th>
<th>Outstanding</th>
<th>Insurer</th>
<th>Joining Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!-------->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Take Fee</h4>
</div>
<div class="modal-body" id="formcontent">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--------->
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</div>
<!-- /. WRAPPER -->
<div id="footer-sec">
iBroker Finance System | Developed By Siyakha Technology
</div>
<!-- BOOTSTRAP SCRIPTS -->
<script src="js/bootstrap.js"></script>
<!-- METISMENU SCRIPTS -->
<script src="js/jquery.metisMenu.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="js/custom1.js"></script>
</body>
</html>
For print styling, use the print media query
#media print {
body {
background-color: lightgreen;
}
}
Another way would be to link existing css file with the print media attribute
<link rel="stylesheet" type="text/css" media="print" href="print.css">
And for auto printing, just use window.print() in your js code
I have this
table.php
<?php
$connect = mysqli_connect("dbexample.com", "dboexample", "password", "dbexample");
$query ="SELECT * FROM te_lb_load_board, te_lb_load_board_cstm WHERE te_lb_load_board.id = te_lb_load_board_cstm.id_c AND te_lb_load_board_cstm.load_status_c LIKE '%open%' ORDER BY shipping_date_c DESC, shipping_time_c ASC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Load Board</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.15/api/fnReloadAjax.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script>
$(document).ready(function(){
$('#employee_data').DataTable();
});
setInterval(function () {
table.fnReloadAjax();
}, 3000);
</script>
</head>
<body>
<br /><br />
<div class="container">
<h3 align="center">Load Board</h3>
<br />
<div class="table-responsive">
<table id="employee_data" class="table table-striped table-bordered">
<thead>
<tr>
<td>Date</td>
<td>Time</td>
<td>Zip</td>
<td>City</td>
<td>Country</td>
<td>Date</td>
<td>Time</td>
<td>Zip</td>
<td>City</td>
<td>Country</td>
<td>Description</td>
</tr>
</thead>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row['shipping_date_c'].'</td>
<td>'.$row['shipping_time_c'].'</td>
<td>'.$row["billing_address_postalcode"].'</td>
<td>'.$row["billing_address_city"].'</td>
<td>'.$row["billing_address_country"].'</td>
<td>'.$row['arrival_date_c'].'</td>
<td>'.$row['arrival_time_c'].'</td>
<td>'.$row["shipping_address_postalcode"].'</td>
<td>'.$row["shipping_address_city"].'</td>
<td>'.$row["shipping_address_country"].'</td>
<td>'.$row["description"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</body>
</html>
I create an index.php file with this code:
<title>Glastopf Observation Center</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#results').load('table.php'); // table.php is where I have my table
}, 3000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>
<div id="results">Loading data ...</div>
It is working, I got the autrefresh of my data on the table but I have every 3 seconds this css problem:
This is how it looks as usual
This is how it looks after 3 seconds
I put the css links into the index.php file I mentioned before but I still have the same css problems:
<title>Glastopf Observation Center</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.15/api/fnReloadAjax.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#results').load('table.php');
}, 3000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>
<div id="results">Loading data ...</div>
I got it working...
In your table.php (you have to use PDO instead of MySQLi):
<?php
$pdo = new PDO("mysql:dbname=dbexample;host=dbexample.com;port=3306", "dboexample", "password");
$query = $pdo->prepare("SELECT * FROM te_lb_load_board, te_lb_load_board_cstm WHERE te_lb_load_board.id = te_lb_load_board_cstm.id_c AND te_lb_load_board_cstm.load_status_c LIKE '%open%' ORDER BY shipping_date_c DESC, shipping_time_c ASC");
$query->execute();
echo json_encode($query->fetchAll());
?>
In your index.php:
<!DOCTYPE html>
<html>
<head>
<title>Load Board</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.15/api/fnReloadAjax.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container">
<h3 align="center">Load Board</h3>
<br />
<div class="table-responsive">
<table id="employee_data" class="table table-striped table-bordered"></table>
</div>
</div>
<script>
$(document).ready(function() {
var table;
$.post('table.php', {}, function(data) {
if(data) {
console.log(data);
table = $('#employee_data').DataTable({
data: data,
columns: [
{'data': 'shipping_date_c', 'title': 'Date'}
,{'data': 'shipping_time_c', 'title': 'Time'}
,{'data': 'billing_address_postalcode', 'title': 'Zip'}
,{'data': 'billing_address_city', 'title': 'City'}
,{'data': 'billing_address_country', 'title': 'Country'}
,{'data': 'arrival_date_c', 'title': 'Date'}
,{'data': 'arrival_time_c', 'title': 'Time'}
,{'data': 'shipping_address_postalcode', 'title': 'Zip'}
,{'data': 'shipping_address_city', 'title': 'City'}
,{'data': 'shipping_address_country', 'title': 'Country'}
,{'data': 'description', 'title': 'Description'}
]
});
}
}, 'json');
setInterval(function () {
table.clear().draw();
$.post('table.php', {}, function(data) {
table.rows.add(data).draw();
}, 'json');
}, 3000);
});
</script>
</body>
</html>
Hey I am new at laravel and I am making an autocomplete search bar. But I am having problem that is when I write any word it gives error in my console panel that is
Failed to load resource: the server responded with a status of 404 (Not Found). jquery-1.10.2.js:8706
the line on which this error is coming in jquery is
xhr.send( ( s.hasContent && s.data ) || null );
Please help me. I have already tried alot but failed to get the required result.
View of my code where I included jquery is
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-4"></div>
<div class="col col-md-4">
<section class="card">
<header class="card-heading">
<input type="text" name="searchname" class="form-control" id="searchname" placeholder="Search" >
</header>
<div class="card-block">
<table>
<tr>
<td>ID</td>
<td><input type="text" name="id" class="form-control"></td>
</tr>
<tr>
<td>Symtomps</td>
<td><input type="text" name="symtomps" class="form-control" ></td>
</tr>
</table>
</div>
</section>
</div>
</div>
</body>
<script type="text/javascript">
$('#searchname').autocomplete({
source: '{!!URL::route('autocomplete')!!}',
//source: '{{ asset('search') }}',
//source: '{{URL::route('autocomplete')}',
minlength:1,
autoFocus:true,
select:function(e,ui){
//$('#id').val($data->symtomps);
}
});
</script>
Controller of my code is
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Disease;
use Input;
class DiseaseController extends Controller
{
public function index()
{
return view('disease.disease');
}
public function autocomplete(Request $request)
{
$term = $request->term;
$data = Disease::where('symtomps','Like','%'.$term.'%')
->take(2)
->get();
$result=array();
foreach($data as $key => $v)
{
$results[]=['id' =>$v->id,'value'=>$v->symtomps];
}
return response()->json($results);
}
}
You have not resource (means not any store file like json) either use ajax or do like this.
source: function (request, response) {
$.get("{!! URL::route('autocomplete') !!}", {
query: request.term
}, function (data) {
response(data);
});
},
If you are using jQuery from CDN, then you have to specify complete link in correct format.
Try changing your lines:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
to
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
How do I edit the design hidden somewhere in this code? Currently this has a functioning search and I want to put an Add button next to a textbox. But I cannot even find the search in this code I'm showing below. I found this datatable template bootstrap on youtube.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Survey Settings</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">
</head>
<body>
<?php
require_once("/dao/CategoryDAO.php");
require_once("/dao/TopicDAO.php");
$category = new CategoryDAO();
$topic = new TopicDAO();
$allCategories_arr = $category->getAllCategories();
$allTopics_arr = $topic->getAllTopicTitles();
?>
<div class="container">
<div class="row">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<td>Category ID</td>
<td>Category Name</td>
<td >Action</td>
</tr>
</thead>
<tbody>
<?php
foreach($allCategories_arr as $ar) {
echo "<tr>";
echo "<td>" . $ar['category_id'] . "</td>";
echo "<td>" . $ar['categoryname'] . "</td>";
echo "<td><a class='btn btn-default' href='viewsubcategory.php?catid=" . $ar['category_id'] . "' >More Info</a>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
</body>
I discovered that this code was triggering the whole design. Therefore, is there anyway I can show the 'hidden' code in this script? I just want to pud an add button and a textbox next to the search.
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
Ok not sure I totally understand your requirements but going from your original post it says an add button by the search box that allows you to insert rows into the datatable. the solution below adds an inline form in the toolbar. then the onclick event adds the row to the datatable.
function category(id, name, action) {
var self = this;
this.id = id;
this.name = name;
this.action = action;
}
function model() {
var self = this;
this.categories = [];
}
var mymodel = new model();
$(document).ready(function() {
mymodel.categories.push(new category('1', 'Cat1', 'Post'));
mymodel.categories.push(new category('2', 'Cat2', 'Get'));
mymodel.categories.push(new category('3', 'Cat3', 'Put'));
var table = $('#mytable').DataTable({
data: mymodel.categories,
columns: [{
data: 'id'
}, {
data: 'name'
}, {
data: 'action'
}
],
dom: '<"toolbar">frtip'
});
$("div.toolbar").html(
'<form class="form-inline">\
<div class="form-group">\
<input type="text" class="form-control" id="rowid" placeholder="id">\
</div>\
<div class="form-group">\
<input type="text" class="form-control" id="name" placeholder="name">\
</div>\
<div class="form-group">\
<input type="text" class="form-control" id="action" placeholder="action">\
</div>\
<input type="button" class="btn btn-danger" id="add" value="add"></input>\
</form>'
);
$('#add').click(function(event) {
table.row.add({
'id': $('#rowid').val(),
'name': $('#name').val(),
'action': $('#action').val()
}).draw(false);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped table-bordered" cellspacing="0" width="100%" id="mytable">
<thead>
<tr>
<th>Category Id</th>
<th>Category Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>