- Details
- Parent Category: Coding
- Category: JQuery Datatables
part 1
Start with the Bootstrap 5 starter template. https://getbootstrap.com/docs/5.0/getting-started/introduction/
part 2 http://resinsupply.co.uk/colourmix/formulaguide2/part2/
Setup the bootstrap <div>s
1 Centre the heading text
<h1 class="text-center">Pantone Formula Guide Crud</h1>2 Make a fluid container for the datatable
<div class = "container-fluid"></div>3 Put a row in
<div class = "container-fluid">
<div class="row"></div>
</div>4 Put a container inside that row
<div class = "container-fluid">
<div class="row">
<div class="container"></div>
</div>
</div>then put a row inside that container
<div class = "container-fluid">
<div class="row">
<div class="container">
<div class="row"></div>
</div>
</div>
</div>inside that row put some 3 columns
<div class = "container-fluid">
<div class="row">
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>
put a table in the 2nd column
<div class = "container-fluid">
<div class="row">
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<table class="table"></table>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>add some table headings
<div class = "container-fluid">
<div class="row">
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<table class="table">
<thead>
<th>Id</th>
<th>Pantone Name</th>
<th>Hex</th>
<th>Part A</th>
<th>Part A Qty</th>
<th>Options</th>
</thead>
</table>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>
add some dummy data in the table body with some buttons
<div class = "container-fluid">
<div class="row">
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<table class="table">
<thead>
<th>Id</th>
<th>Pantone Name</th>
<th>Hex</th>
<th>Part A</th>
<th>Part A Qty</th>
<th>Options</th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>
- Details
- Parent Category: Coding
- Category: JQuery Datatables
part3
http://resinsupply.co.uk/colourmix/formulaguide2/part3/
07:14 into video setup datatables https://datatables.net/download/
Add datatables
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.12.1/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.12.1/datatables.min.js"></script>Add Jquery
https://releases.jquery.com/<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>add an id to the table tag
<table id="datatable" class="table">Add datatable object
- Details
- Parent Category: Coding
- Category: JQuery Datatables
part4
http://resinsupply.co.uk/colourmix/formulaguide2/part4/
09:00
Add datatables parameters
- Details
- Parent Category: Coding
- Category: JQuery Datatables
part 1 http://resinsupply.co.uk/datatables2formulaguide
Requires 2 files:
index.html and ajax.php
When the document loads
$(document).ready(function() {
$("#addNew").on('click', function () {
$("#tableManager").modal('show');
});
getExistingData(0, 10);
});
index.html has 3 functions
getExistingData(start,limit)
manageData(key)
isNotEmpty(caller)
ajax.php has 2 if sections
if (isset($_POST['key']))
{
.... connect to the database
if ($_POST['key'] == 'getExistingData')
{
execute a sql query and exit with a html string of tags
}
}
- Details
- Parent Category: Coding
- Category: JQuery Datatables
Restaurant Management System
This video on Online Restaurant Management System Porject in PHP. By using this system you can learn How to create food ordering system in PHP. This is Online Restaurant Management System Porject in PHP. This Restaurant Management System is developed using PHP and Mysql as backend side and front-end side we have use jQuery, Ajax, jQuery DataTable plugin etc. With this Restaurant Management system you will get free source code of this system.
Following are the Module of Restaurant Management System
- Order Management Module
- Billing Management Module
- Live Table Status Module
- Food Category Module
- Food Item Module
- Tax Management Module
- User Management Module
For View Live Online Demo of PHP Restaurant Management System - https://www.webslesson.info/2020/12/r...