I am consuming api successfully in knockout.js.But according to my table definition(id,name,debit,credit,amount),this is based on accounting.The amount i want to show if it is credit or debit since not all the amount are under the debit and credit the same time.kindly help me to diplay the amount under redit and debit respectively.
This is the viewmodel
function JournalViewModel() {
var self = this;
self.Period = ko.observable();
self.PayGroup = ko.observable();
self.PayGroups = ko.observableArray([]);
self.LoadPeriods = function () {
$.ajax({
url: baseUrl + 'api/Process/Load',
type: 'GET',
headers: { 'Access-Control-Allow-Origin': '*' },
dataType: 'json',
success: function (data) {
console.log(data);
if (data.Successfull == 1) {
self.Period(data.Model.CurrentPeriod);
self.PayGroups(data.Model.Paygroups);
}
},
error: function (request, error) {
console.log(error);
}
});
}
self.periodId = ko.observable();
self.PaygroupId = ko.observable();
self.Journal = ko.observableArray([]);
self.PayMaster = ko.observableArray();
self.LoadJournal = function () {
$.ajax({
url: baseUrl + 'api/Journal/LoadJournal/'+periodId +'/'+self.PaygroupId(),
type: 'GET',
cache: false,
headers: { 'Access-Control-Allow-Origin': '*' },
dataType: 'json',
success: function (data) {
if (data.HasError == 0) {
self.Journal(data.Model);
console.log(data.Model);
alert("Journal Successfully Processed");
$("#listTable").DataTable();
}
},
error: function (request, error) {
console.log(error);
}
});
}
self.StartDate = ko.observable()
self.EndDate = ko.observable()
self.NbDays = ko.observable();
self.NbHours = ko.observable();
self.Code = ko.observable();
self.CountEmployees = ko.observable();
self.LoadPeriods();
}ko.applyBindings(new JournalViewModel());
this is my view
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<nav role="navigation" aria-labelledby="system-breadcrumb">
<ol class="breadcrumb">
<li>Process</li>
<li>Journals</li>
</ol>
</nav>
<div class="box box-primary">
<div class="box-body">
<div class="col-md-12">
<div class="col-md-2">
<div class="form-group">
<label for="PeriodTxt">Pay Group</label>
<select data-bind="options: PayGroups,
optionsText: 'Name',
optionsValue: 'Id',
optionsCaption: 'Choose...',
value:PaygroupId" class="form-control"></select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="PeriodTxt">Period</label>
<input id="FullNameTxt" class="form-control" type="text"
readonly="readonly"
data-bind="value:Period()?Period().Code:''" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="StatusTxt">Number of Hours</label>
<input id="StatusTxt" class="form-control" type="text"
readonly="readonly"
data-bind="value:Period()?Period().NbHours:''" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="ds"></label>
<input type="submit" value="Load Journal" data-
bind="click:LoadJournal" class="btn btn-primary btn-block" />
</div>
</div>
</div>
</div>
</div>
<div class="well">
<div class="well-body">
<table id="listTable" class='table table-striped table-bordered'>
<thead>
<tr>
<th>
Account Code
</th>
<th>
Name
</th>
<th>
Debit
</th>
<th>
Credit
</th>
</tr>
</thead>
<tbody data-bind="foreach:Journal">
<tr>
<td data-bind="text:AcctId">
</td>
<td data-bind="text:AcctDescription">
</td>
<!-- ko if:Debit==1 -->
<td data-bind="text:Amount">
</td>
<!-- /ko -->
<!-- ko if:Credit==1 -->
<td data-bind="text:Amount"></td>
<!-- /ko -->
</tr>
</tbody>
</table>
</div>
</div>
#section Scripts{
<script>periodId = '#ViewBag.PeriodId';</script>
}
The problem is that you have the if condition on the tag, which will not render if false. The trick is to put it inside the tag as you want that to be shown all the time, just not the value inside. (If I understood your question correctly ofcourse)
<table>
<thead>
<tr>
<th>Account Code</th>
<th>Name</th>
<th>Debit</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr>
<td data-bind="text:AcctId"></td>
<td data-bind="text:AcctDescription"></td>
<td>
<span data-bind="if: Debit == 1">
<!-- ko text: Amount -->
<!-- /ko -->
</span>
</td>
<td>
<span data-bind="if: Credit == 1">
<!-- ko text: Amount -->
<!-- /ko -->
</span>
</td>
</tr>
</tbody>
</table>
Related
I have a list here from my table. It has a edit button and if I click edit button, It goes to another component which is called editTeacher. My question is how could I get the data from the table and transfer it to my editTeacher component. I get the data from route using axios . In laravel it is like this
<span class="glyphicon glyphicon-pencil"> .
How could I achieve it in vue?
Here is my code snippet
<table id="myTable" class="table table-hover">
<tbody>
<tr>
<th>ID</th>
<th>Image</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Birthday</th>
<th>Age</th>
<th>Type</th>
<th>Department</th>
<th>Status</th>
<th>Actions</th>
</tr>
<tr v-for="teacher in teachers" :key="teacher.id">
<td>{{teacher.id}}</td>
<td><img style=" border-radius: 50%;" :src="'img/'+teacher.image" height="42" width="42"/></td>
<td>{{teacher.firstname}}</td>
<td>{{teacher.lastname}}</td>
<td>{{teacher.gender}}</td>
<td>{{teacher.birthday}}</td>
<td>{{teacher.age}}</td>
<td>{{teacher.type}}</td>
<td>{{teacher.department_name}}</td>
<td v-if="teacher.status == 1"><span class="label label-success">Active</span></td>
<td v-else><span class="label label-danger">Inactive</span></td>
<td><router-link to="/viewTeacher"> <i class="fa fa-edit"></i></router-link></td>
</tr>
</tbody>
</table>
Route
//Teachers
Route::get('/getTeachers','TeacherController#index');
Route::post('/addTeacher','TeacherController#store');
Route::put('/editTeacher/{id}','TeacherController#update');
app.js route
{ path: '/viewTeacher', component: require('./components/editTeacher.vue').default },
Please follow the below code for the Vue js edit method.
As per your git repo.
app.js route
{ path: '/viewTeacher/:id', component: require('./components/editTeacher.vue').default, name: viewTeacher},
Edit Button in Teachers.vue
<router-link :to="{name: 'viewTeacher', params: {id: teacher.id}}" class="btn btn-xs btn-default">Edit</router-link>
EditTeacher.vue component
<template>
<div class="row">
<div class="col-xs-3">
<div class="box">
<div class="box-tools">
<img style="border-radius: 50%;" src="" height="100" width="50">
</div>
</div>
</div>
<div class="col-xs-9">
<div class="box">
<form v-on:submit.prevent="saveForm()">
<div class="row">
<div class="col-xs-12 form-group">
<label class="control-label">Teacher first name</label>
<input type="text" v-model="teacher.firstname" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12 form-group">
<label class="control-label">Teacher Last name</label>
<input type="text" v-model="teacher.lastname" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12 form-group">
<button class="btn btn-success">Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
let app = this;
let id = app.$route.params.id;
app.teacherId = id;
axios.get('/getTeacher/' + id)
.then(function (resp) {
app.teacher = resp.data;
})
.catch(function () {
alert("Could not load teacher")
});
},
data: function () {
return {
teacherId: null,
teacher: {
firstname: '',
lastname: '',
}
}
},
methods: {
saveForm() {
var app = this;
var newTeacher = app.teacher;
axios.patch('/editTeacher/' + app.teacherId, newTeacher )
.then(function (resp) {
app.$router.replace('/');
})
.catch(function (resp) {
console.log(resp);
alert("Could not Update");
});
}
}
}
Web.php
Route::get('/getTeachers','TeacherController#index');
Route::get('/getTeacher/{id}','TeacherController#show');
Route::post('/addTeacher','TeacherController#store');
Route::put('/editTeacher/{id}','TeacherController#update');
Controller
public function show($id)
{
return Teacher::findOrFail($id);
}
I have two div on index page that contains a datatable i need to hide two div by default when I select an option in dropdown then i need to show that corresponding div based on selection.
I am using this page for searching a div contains a drop downmenu contains two options to select.when i select indents it should return that corresponding div
Index File
#include('theme.header')
<br>
<div class="row" id="dropsearch">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body ">
<h4 class="mt-0 header-title">Search Indent</h4>
<label class="pull-left">
<select class="pull-left form-control input-lg" id="dropsearch" name="dropsearch">
<option>Select Search</option>
<option>Indents</option>
<option>Jobcards</option>
</select>
</label>
</div>
</div>
</div>
</div>
<div class="row" id="indents">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body ">
<h4 class="mt-0 header-title">Search Indent</h4>
<input type="text" id="searchid" name="searchid" class="pull-right form-control-sm">
<label class="pull-right">search</label>
<br>
<br><br>
<table id="datatable" class="table table-bordered table-responsive-lg">
<thead>
<tr>
<th>Slno</th>
<th>Customer Name</th>
<th>Customer Phone Number</th>
<th>DateOfDelivery</th>
<th>Delivery At</th>
<th>Redistraion Mode</th>
<th>Chassis No</th>
<th>Engine No</th>
<th>Show</th>
</tr>
</thead>
<tbody id="searchinfo">
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="row" id="jobcardd">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body bg-secondary text-white">
<h4 class="mt-0 header-title">Search Jobcard</h4>
<input type="text" id="searchjob" name="searchjob" class="pull-right form-control-sm">
<label class="pull-right">search</label>
<br>
<br><br>
<table id="datatable" class="table table-bordered table-responsive-lg">
<thead>
<tr>
<th>Slno</th>
<th>Jobcard No</th>
<th>Customer Order No</th>
<th>Ticket No</th>
<th>Bill No</th>
<th>Show</th>
</tr>
</thead>
<tbody id="searchjobcard">
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
$('#indents').hide();
$('#jobcardd').hide();
$(function () {
$("#dropsearch").change(function () {
if ($(this).val() == "indents") {
$("#indents").show();
}
else if ($(this).val() == "jobcard") {
$("#jobcardd").show();
}
});
});
$(document).ready(function () {
$('#searchid').on('keypress', function () {
$value = $(this).val();
$.ajax({
type: 'GET',
url: '{{\Illuminate\Support\Facades\URL::to('searchindents')}}',
data: {'searchid': $value},
success: function (data) {
$('#searchinfo').html(data);
// console.log(data);
}
})
})
});
$(document).ready(function () {
$('#searchjob').on('keypress', function () {
$value = $(this).val();
$.ajax({
type: 'GET',
url: '{{\Illuminate\Support\Facades\URL::to('searchjobacard')}}',
data: {'searchjob': $value},
success: function (data) {
$('#searchjobcard').html(data);
// console.log(data);
}
})
})
});
</script>
<script>
$.ajaxSetup({headers: {'csrftoken': '{{ csrf_token() }}'}});
</script>
#include('theme.footer')
Change this
<option>Select Search</option>
<option>Indents</option>
<option>Jobcards</option>
To this
<option value="">Select Search</option>
<option value="indents">Indents</option>
<option value="jobcard">Jobcards</option>
Update
You have given same ID to the DIV and DropDown!!
Use this
<select class="pull-left form-control input-lg" id="dropsearchselect" name="dropsearch">
<option value="">Select Search</option>
<option value="indents">Indents</option>
<option value="jobcard">Jobcards</option>
</select>
$(function () {
$("#dropsearchselect").change(function () {
if ($(this).val() == "indents") {
$("#indents").show();
}
else if ($(this).val() == "jobcard") {
$("#jobcardd").show();
}
});
});
Here is a fiddle
Update 2
$('#indents').hide();
$('#jobcardd').hide();
$(function () {
$("#dropsearchselect").change(function () {
if ($(this).val() == "indents") {
$('#jobcardd').hide();
$("#indents").show();
}
else if ($(this).val() == "jobcard") {
$('#indents').hide();
$("#jobcardd").show();
}else{
$('#indents').hide();
$('#jobcardd').hide();
}
});
});
As I have an input field for search having ng-model as 'search'. for this input i update url with $location.search({search:$scope.search}). after updating url i set expression under ng-show to true.
this thing are not working simultaneously.
js
app.controller('searchCtrl', function ($rootScope, $scope, $http, $cookies, $localStorage, $filter, $routeParams, $location, $window, $route) {
console.log("in search ctrl");
$scope.srchfn = function () {
console.log("in srchfn")
console.log("localStorage.getItem('user_name') " + localStorage.getItem('user_name'));
var srchdata = {
user_name: localStorage.getItem('user_name'),
token: localStorage.getItem('token'),
};
srchdata.search_trans = $scope.search;
$http.post('http://...../search_trans', srchdata).
success(function (data, status, header, config) {
console.log("data: %j", data);
if (data.success == 1) {
console.log("search success");
console.log("data.trans.tranid " + data.trans.tranid);
$scope.tranid = data.trans.tranid;
$scope.dateTime = data.trans.dateTime;
$scope.refid = data.trans.refid;
$scope.amount = data.trans.amount;
$scope.status = data.trans.status;
$scope.type = data.trans.type;
$scope.creditVpa = data.trans.creditVpa;
$scope.remarks = data.trans.remarks;
$scope.debitVpa = data.trans.debitVpa;
$scope.debitAccount = data.trans.debitAccount;
// I am asking about these next two lines
$scope.showuser = true;
$location.search({ search: srchdata.search_trans });
}
else if (data.success == -1) {
console.log("transactions not found");
}
else {
console.log("there is some error");
}
}).
error(function (data, status, header, config) {
console.log("data: %j", data);
});
};
});
html
<div class="row">
<div style="margin-left: 24px;" ng-hide="hidesearch1" ng-controller='searchCtrl'>
<h3 style="padding-left: 15px;">Dashboard</h3>
<form class="form-inline" ng-submit="srchfn()">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" ng-model="search" style="border-radius: 0;" class="form-control sbsz searchcls" placeholder="Search" ng-enter="srchfn()">
<button type="submit" style="visibility: hidden;"></button>
</div>
</div>
</div>
</div>
</form>
<table class="table table-striped table-bordered" style="max-width: 1100px; margin-top: 20px; margin-left: 15px;" ng-show="showuser" id="searchTblId">
<thead>
<tr>
<th ng-click="sort('id')">
Id
<span class="glyphicon sort-icon" ng-show="sortKey=='id'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('date')">
Date
<span class="glyphicon sort-icon" type="date" ng-show="sortKey=='date'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('crn')">
CRN
<span class="glyphicon sort-icon" ng-show="sortKey=='crn'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('amount')">
Amount
<span class="glyphicon sort-icon" ng-show="sortKey=='amount'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('status')">
Status
<span class="glyphicon sort-icon" ng-show="sortKey=='status'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-click="isOpen=!isOpen">
<td>{{tranid}}</td>
<td><span style="font-weight:600;">{{dateTime | date : "dd.MM.y"}}   </span>{{dateTime | date : "h:mm a"}}</td>
<td>{{refid}}</td>
<td class="dsbld">{{amount | currency:"₹"}}</td>
<!--<td>{{user.status}}</td>-->
<td style="text-align:center;" ng-class="{
'rcolr': status === 'F',
'ocolr': status === 'P',
'gcolr': status === 'C'}">
{{status}}
</td>
</tr>
<tr ng-if="isOpen">
<td colspan="6">
<!-- <h3>user details are as:</h3> -->
<div class="u_detail01">
<div class="item l">
<strong>Mobile No:</strong>{{mobile_no}}<br>
<strong>Type:</strong> {{type}}<br>
<strong>credit vpa:</strong> {{creditVpa}}<br>
</div>
<div class="item r">
<strong>Debit vpa:</strong> {{debitVpa}}<br>
<strong>Debit Account:</strong> {{debitAccount}}<br>
<strong>Remarks:</strong> {{remarks}}
<!-- <button ng-click="opnfn()">Note</button> -->
</div>
</div>
<!-- <div ng-if="noteClicked" style="align-self:center;">
<textarea cols="20" rows="5" placeholder="Notes" autofocus="true" style="width: 400px; border: 1px solid #ccc; margin-top: 20px; padding: 15px 10px; outline: none;"></textarea><br/>
<button ng-click="savefn()">Save</button>
<label id="sent to server"></label>
</div> -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
I want to save multiple data in one go using codeigniter and then on success load the data on my datatable wihtout refreshing the whole page. I am able to do this successfully if I use modal and insert a single value but when I try to save multiple values, it doesn't work. I produce my input boxes on button click. Below are my codes:
CONTROLLER
public function add_multiple_orders(){
$dataset=[];
$item_name=$this->input->post('m_item_name');
$quantity=$this->input->post('m_quantity');
$amount=$this->input->post('m_amount');
$order_comment=$this->input->post('m_order_comment');
$branch_name=$this->input->post('m_branch_name');
$date_added=$this->input->post('m_date_added');
for($i=0;$i<sizeof($item_name);$i++){
$dataset[$i]=array(
'date_added'=>$date_added,
'item_name'=>$item_name[$i],
'quantity'=>$quantity[$i],
'amount'=>$amount[$i],
'ordered_by'=>$this->session->userdata['username'],
'order_status'=>'ordered',
'order_comment'=>$order_comment[$i],
'branch_name'=>$branch_name
);
}
$result=$this->sales_model->insert_mult_orders($dataset);
}
VIEW
<a name="mult_page">
<button class="btn btn-info" data-toggle="collapse" data-target="#add_multiple" style="margin-left: 20px;">Add Multiple Orders</button>
<div class="collapse" id="add_multiple" style="width: 95%; margin: 0 auto; margin-top: 10px;">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
</div>
<div class="panel-body">
<form class="form_mult_ordrs form-inline" method="post">
<div class="form-group">
<label for="m_date_added">Date</label>
<input type="date" name="m_date_added" required>
</div>
<div class="form-group">
<label for="m_branch_name" class="control-label">Branch Name</label>
<select name="m_branch_name" class="form-control">
<option value="superdome">Superdome</option>';
<option value="seaside">Sea Side</option>
<option value="robinsons">Robinsons</option>
</select>
</div>
<div class="btn btn-warning pull-right" onclick="add_new_row()">Add more</div>
<hr>
<div style="font-weight: bold;">Total Php <input type="text" id="total_result" placeholder="0.00" class="form-control"></div>
<br>
<table id="mult_ord_tbl" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th class="ui-help-center">Item Name</th>
<th class="ui-help-center">Quantity</th>
<th class="ui-help-center">Amount</th>
<th class="ui-help-center">Comment</th>
<th class="ui-help-center">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="item_name[]" class="form-control">
<?php foreach($items as $item){
echo '<option value"='.$item->item_name.'">'.$item->item_name.'</option>';
} ?>
</select>
</td>
<td><input type="text" name="m_quantity[]" placeholder="Quantity"></td>
<td><input type="text" name="m_amount[]" id='m_amount[]' placeholder="Amount" onblur="total_values()"></td>
<td><input type="text" name="m_order_comment[]" placeholder="Commment"></td>
<td>
<button class="btn btn-danger" onclick="delete_row(this)"><i class="glyphicon glyphicon-remove"></i></button>
</td>
</tr>
</tbody>
</table>
<tr>
<td colspan="12">
<button id="btn_mult_ordrs" class="btn btn-success" onclick="save_mult_ordrs()" value="">Submit All</button>
</td>
</tr>
</form>
</div> <!-- end of panel body -->
<div class="panel-footer">
footer
</div>
</div> <!-- end of panel primary -->
</div> <!-- end of column 12 -->
</div> <!-- end of row -->
</div> <!-- end of collapse -->
<script type="text/javascript">
$(document).ready(function(){
$('#table_id').DataTable({
"order":[[0,"desc"]]
});
});
function save_mult_ordrs(){
if(confirm("Are you done?")){
var url="<?php echo site_url('sales/add_multiple_orders')?>";
add_new_row();
// $("#form_mult_ordrs").submit();
$.ajax({
url:url,
type:"POST",
data:$('#form_mult_ordrs').serialize(),
datatype:"JSON",
success:function(data)
{
alert('All data has been saved.');
location.reload();
},
error:function(jqXHR, textStatus, errorThrown){
alert('Error in saving.');
}
});
}
}
function add_new_row(){
var arrTables = document.getElementById('mult_ord_tbl');
var oRows = arrTables.rows;
var numRows = oRows.length;
var newRow = document.getElementById('mult_ord_tbl').insertRow( numRows );
var cell1=newRow.insertCell(0);
var cell2=newRow.insertCell(1);
var cell3=newRow.insertCell(2);
var cell4=newRow.insertCell(3);
var cell5=newRow.insertCell(4);
cell1.innerHTML = "<tr><td><select name='m_item_name[]' class='form-control'>" +
<?php
foreach($items as $item){
echo ('"<option value=\"'.$item->item_name.'\">'.$item->item_name.'</option>"+');
}
?>
+ "</select></td>";
cell2.innerHTML="<td height='5'><input type='text' name='m_quantity[]' placeholder='Quantity'></td>";
cell3.innerHTML="<td height='5'><input type='text' name='m_amount[]' placeholder='Amount' onblur='total_values()'></td>"
cell4.innerHTML="<td height='5'><input type='text' name='m_order_comment[]' placeholder='Comment'></td>";
cell5.innerHTML="<td><button class='btn btn-danger' onclick='delete_row(this)''><i class='glyphicon glyphicon-remove'></i></button></td></tr>";
}
</script>
MODEL
public function insert_mult_orders($data){
$this->db->insert_batch('piercapitan.sls_ordrs',$data);
return $this->db->affected_rows();
}
Your help is immensely appreciated.
Never mind guys. I found what's wrong. It's my form id! I somehow placed the name on the class and not on the id.
<form class="form_mult_ordrs form-inline" method="post">
It should have been:
<form id="form_mult_ordrs" class="form-inline" method="post">
This is my view of page.
This is the code of above page.
When i click on any page button i got that page script in alert(data). but i want from here only rows of this page and
append below the existing rows
.
<script>
$( document ).ready(function() {
$('button[id^="next"]').on('click', function() {
var page = ($(this).attr('value'));
$.ajax({
type: "GET",
url: 'index.php?act=product',
data: ({page:page}),
success: function(data) {
alert(data); // what to do i here. please suggest me.
}
});
});
});
</script>
My existing rows is here
<tbody>
<?php foreach($products as $product){ ?>
<tr>
<td class="text-center"><input name="checkbox[]" type="checkbox" value="<?php echo $product['product_id']; ?>"></td>
<td class="text-center"><?php echo $product['name']; ?></td>
<td class="text-center"><?php echo $product['sku']; ?></td>
<td class="text-center"><?php echo $product['status']; ?></td>
<td class="text-center"><?php echo $product['date_time']; ?></td>
<td class="text-center"> Edit</td>
</tr>**//here in the last but this is dynamic <tr>.**
<?php } ?>
</tbody>
Sample of alert(data) is below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!----amit bootstrap---->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="view/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="view/css/style.css">
<script src="view/js/jquery.min.js"></script>
<script src="view/bootstrap/js/bootstrap.min.js"></script>
<!--validation code start------->
<link rel="stylesheet" href="view/css/jquery-ui.css"/>
<script src="view/js/jquery-ui.js"></script>
<script src="view/js/jquery.validate.min.js"></script>
<script src="view/js/additional-methods.min.js"></script>
<!-- amit bootstrap end ---->
</head>
<script>
function ToggleAll(source) {
var checkboxes = document.getElementsByName('checkbox[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
<script>
$( document ).ready(function() {
$('button[id^="next"]').on('click', function() {
var page = ($(this).attr('value'));
$.ajax({
type: "GET",
url: 'index.php?act=product',
data: ({page:page}),
success: function(data) {
alert(data);
}
});
});
});
</script>
<body>
<div class="jumbotron text-center">
<h2>View Upload Product</h2>
</div>
<div class="col-sm-12 menu">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-9 text-right"> Back </div>
<div class="col-sm-1 text-right"> Logout </div>
<div class="col-sm-1"></div>
</div><br/>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-1"></div>
<form role="form" name="deleteproduct" id="deleteproduct" method="POST" action="index.php?act=deleteproduct" class="form-horizontal">
<div class="col-sm-10">
<div class="row">
<div class="col-sm-10"> </div>
<div class="col-sm-2 text-center"><button class="btn btn-primary btn-md" type="submit" name="delete" value="delete">Delete</button></div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th class="text-center"><input type='checkbox' name='checkall' onclick='ToggleAll(this);'></th>
<th class="text-center">Name</th>
<th class="text-center">SKU</th>
<th class="text-center">Status</th>
<th class="text-center">Date & Time</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center"><input name="checkbox[]" type="checkbox" value="27"></td>
<td class="text-center">test</td>
<td class="text-center">123</td>
<td class="text-center">Y</td>
<td class="text-center">2015-08-14 17:38:29</td>
<td class="text-center"> Edit</td>
</tr>
<tr>
<td class="text-center"><input name="checkbox[]" type="checkbox" value="28"></td>
<td class="text-center">test2</td>
<td class="text-center">1qas</td>
<td class="text-center">Y</td>
<td class="text-center">2015-08-14 17:38:29</td>
<td class="text-center"> Edit</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<button class="btn btn-default btn-md" type="submit" name="magento" value="magento">Magento Upload</button>
</div>
</div>
</div>
</form>
<div class="col-sm-1"></div>
</div>
</div>
<div class="col-sm-12"><br/>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8 text-center">
<button class='btn page' id='next1' value='1'>1</button><button class='btn page' id='next2' value='2'>2</button> </div>
<div class="col-sm-2"></div>
</div>
</div>
</body>
</html>
Depending on your ajax response format, if it where json, it could be done like this:
$.ajax({
type: "GET",
url: 'index.php?act=product',
data: ({page:page}),
success: function(data) {
var my_data = jQuery.parseJSON(data);
for (var i = 0; i < my_data.length; i++) {
var my_row = $('<tr>');
var my_html = '<td>'+my_data[i].field+'</td>';
my_html += '<td>'+my_data[i].field2+'</td>';
my_row.html(my_html);
$('tbody').append(my_row);
}
}
});
EDIT: But given your code, you need to parse the and append them to your DOM
-EDIT: If you need to make the call just once:
var requestDone = false;
$( document ).ready(function() {
$('button[id^="next"]').on('click', function() {
if( !requestDone) {
$.ajax({
type: "GET",
url: 'index.php?act=product',
data: ({page:page}),
success: function(data) {
var my_rows = $(data).find('tbody').html();
$('tbody').append(my_rows);
requestDone = true;
}
});
}
});
});