I'm trying to fetch the data from the database from a table 'Company' in the output it coming as a json format,i have to display it in a Data Table.
Controller
public function ex(Request $request){
$table = \DB::table('company')->select('name','type','address','city','email','description')->get();
//return view('mydata')->with('company',$table);
return response($table);
}
Route
Route::get('display','Test#ex');
Blade page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("table").toggle();
$.get("{{URL::to('display')}}",function (data) {
$.each(data,function (i,value) {
var tr =$("<tr/>");
tr.append($("<td/>",{
text : value.name /*Get first column*/
}))
})
})
});
});
</script>
</head>
<body>
<button>Click Me</button>
<table border="1px" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Address</th>
<th>City</th>
<th>Email</th>
<th>Description</th>
</tr>
</thead>
</table>
</body>
</html>
the output coming as in following image but i want to display it in a Datatable
you can use yajjra laravel package to show data via ajax
here is the complete tutorial to show data via ajax in datatable
Datable Tutorial
Related
I am facing an issue while displaying the nested data inside the ng-repeat. I get data for the first 4 fields but those which are more nested like the label and onwards field data do not show up. the last 5 fields appear to be empty and does not fetch the data. Will be glad if anyone could help troubleshoot the issue.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<!-- <p>Today's welcome message is:</p> -->
<table border="2">
<tr>
<th>deliveryRecipient</th>
<th>Pick Up Locality</th>
<th>Delivery Locality</th>
<th>Created On</th>
<th>Name</th>
<th>category</th>
<th>Item Price</th>
<th>Weight</th>
<th>Qty</th>
<th>Action</th>
</tr>
<tr ng-repeat="x in myWelcome">
<td>{{x.deliveryRecipient}}</td>
<td>{{x.pickupLocality}}</td>
<td>{{x.deliveryLocality}}</td>
<td>{{x.createdOn}}</td>
<td>{{x.label}}</td>
<td>{{x.category}}</td>
<td>{{x.actualPriceLabel}}</td>
<td>{{x.weight}}</td>
<td>{{x.quantity}}</td>
<td><button onclick="showgraphqldata()" type="button" class="view">View</button></td>
</tr>
<td ng-repeat="y in x.items">
<td>
<tr ng-repeat="z in y">
<td>{{z.label}}</td>
<td>{{z.category}}</td>
<td>{{z.actualPriceLabel}}</td>
<td>{{z.weight}}</td>
<td>{{z.quantity}}</td>
</tr>
<input type="hidden" value="{{x.uid}}" />
</table>
</div>
<!-- <p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome"
variable.</p> -->
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http({
method: "GET",
url: "https://api-stg.martcart.pk/api/v1/merchants/incomingOrders?archived=false&isIncomingOrders=true&isPurchaseOrders=true&loadItems=true&pageNumber=1&recordsPerPage=100&statusIn=NEW,VIEWED",
headers: {
datatype: 'JSON',
, 'Content-Type': 'application/json'
}
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on('click', '.view', function () {
var uid = $(this).parent().prev().val();
</script>
</body>
</html>
attached images are the responses if json data
enter image description here
enter image description here
How can I remove products from the MySql database when I click on a button in the Vue.js table?
I just wrote it so that it only deletes in View. Database is associated with Laravel.
<div class="container" id="main">
<h1>#{{title}}</h1>
<h3>Products (#{{products.length}})</h3>
<table class="table table-striped">
<thead>
<tr style="font-size: 14px;">
<th>Name</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in products" class="prodimg">
<td><h5>#{{item.name}}</h5></td>
<td><h5>#{{item.price}}</h5></td>
<td><button v-on:click.prevent="deleteProduct(index)">Delete
Product</button></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
new Vue({
el:"#main",
data:{
products:[],
title: "Products panel"
},
methods:{
deleteProduct:function(r){
this.$delete(this.products,r);
}
},
created:function(){
axios.get("/products/all").then(r=>{
this.products = r.data;
})
}
})
</script>
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\UserModel;
use App\ProductModel;
class Admin extends Controller
{
function productsPanel(){
return view('/adminproducts');
}
function products(){
return ProductModel::all();
}
}
What function should be written for this in Laravel and Vue.js?
You need an DELETE api which is callable like this.
axios.delete(`/product/${product_id}`).then(r=>{
// do something
})
I'm trying to load data and popular a table bootstrap-table through an ajax call, but it does not work with the load method. Trying the data method works normally.
the method is not starting, it also does not display that no result was found
Table
<table id="table-anexo" class="table table-striped table-hover display" style="width:100%">
<thead>
<tr>
<th data-field="id"><span>DOCUMENTO</span></th>
<th data-field="tipo"><span>TIPO</span></th>
<th data-field="dt_anexo"><span>DATA ANEXO</span></th>
<!--<th data-field="acao" data-formatter="" data-events="" ><span>AÇÃO</span></th>-->
</tr>
</thead>
</table>
Function AJAX
function get_anexo_ajax(metodo, editando_id) {
var ticket_id = editando_id;
$.ajax({
type: 'POST',
data: {ticket_id : ticket_id},
url: 'ticket/get_anexo_all',
success: (function (data) {
console.log(data.anexo);
//$('#table-anexo').bootstrapTable({ data: data.anexo });
//$('#table-anexo').bootstrapTable('refresh')
$('#table-anexo').bootstrapTable('load', data.anexo);
}),
});
}
Data JSON
{"anexo":[{"id":"1","tipo":"jpg","dt_anexo":"2018-08-01 11:09:28","mensagem_id":"2","ticket_id":"1"}]}
I think data is the invalid format. And Set data-toggle="table" on a normal table. I tested, it run Ok. You can try:
<table id="table-anexo" data-toggle="table" class="table table-striped table-hover display" style="width:100%">
var obj = JSON.parse(data);
$('#table-anexo').bootstrapTable('load', obj.anexo);
I have different view (grid and list). I am using datatable as list view but the datatable function is not working. I am using ajax to refresh the content in div tag.
$('#grid').click(function(){
$('#searchBar').show();
$.ajax({
type:'GET',
url:'/refreshList',
dataType: 'HTML',
success:function(html){
$('#body').html(html);
},
error:function(){
}
});
});
In my another list view file
<table class="table display nowrap" cellspacing="0" width="100%" id="main-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<td></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$('#main-table').DataTable({
"responsive": true
});
});
</script>
I will refresh the content of div replace by this table, but it shows without datatable function. ps.written in 2 different file.
I was having some trouble with the Angular ng-repeat directive. The attached is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController as me" >
<button ng-click="myData.doClick(item, $event)">Send AJAX Request</button>
<br/>
<tr>
<th>Test Suite Name</th>
<th>Test Suite Key</th>
<th>Date</th>
<th>Start Time</th>
<th>End Time</th>
<th>Total Tests</th>
<th>Passed</th>
<th>Failed</th>
<th>Quarantined</th>
</tr>
<tr ng-repeat="data in myData">
<th>{{data.name}}</th>
<th>{{data.plan_key}}</th>
<th>{{data.start_date}}</th>
<th>{{data.start_time}}</th>
<th>{{data.end_time}}</th>
<th>{{data.total_test}}</th>
<th>{{data.test_passed}}</th>
<th>{{data.test_failed}}</th>
<th>{{data.test_quarantined}}</th>
</tr>
<h1>Data from server: {{myData[0].name}}</h1>
</div>
<script>
var $received_data;
var test = angular.module("myapp", []);
// .config(['$httpProvider', function($httpProvider) {
// $httpProvider.defaults.useXDomain = true;
// delete $httpProvider.defaults.headers.common['X-Requested-With'];
// }
// ])
test.controller("MyController", function($scope, $http) {
$scope.myData = {};
$scope.myData.doClick = function(item, event) {
var responsePromise = $http.get("http://127.0.0.1:5000/home");
responsePromise.success(function(data, status, headers, config) {
console.log("ok")
$scope.myData = data.result;
//$scope.received_data = data.reault;
});
responsePromise.error(function(data, status, headers, config) {
alert("error?");
});
}
} );
</script>
</body>
</html>
So basically it gets a list of JSON and I want it to be printed in table form.
I am trying to do it with ng-repeat with tr ng-repeat="data in myData" but it somehow didn't show up.
However, the <h1>Data from server: {{myData[0].name}}</h1> did get printed out correctly.
I am new to AngularJS so I suppose it must be something really stupid mistake that I have made.
Thank you
I think there are a couple problems here.
1 your HTML structure should be reworked. Ideally it should look like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in myData.result">
<td>{{data.name}}</td>
<td>{{data.start_date}}</td>
<td>{{data.start_time}}</td>
<td>{{data.end_time}}</td>
</tr>
</tbody>
</table>
2 This refers to #blowsies comment. You are using the same $scope.myData to handle the function & the data. Which is fine, but you're missing a level of nesting. Currently you have a $scope.myData.doClick() which loads the data from the server. And then you assign it at $scope.myData which is most likely having a problem. Instead, assign it to $scope.myData.result` and change your HTML accordingly.
Working example