I don't know how to render datatable in view, here is the code in my controller.
public function getTable()
{
$tasks = Todo::select(array('todos.id','todos.task','todos.deadline','todos.status'));
return Datatables::of($tasks)->make();
}
Any help will be appreciated.
You need to create the datatable structure in your view and call the controller method with jQuery.
For example in your view you can set the following html:
<table id="tasks" class="table table-striped table-hover">
<thead>
<tr>
<th class="col-md-3">ID</th>
<th class="col-md-3">Task</th>
<th class="col-md-3">Deadline</th>
<th class="col-md-3">Status</th>
</tr>
</thead>
</table>
And then add the following jQuery that calls your controller action
<script type="text/javascript">
var oTable;
$(document).ready(function() {
oTable = $('#tasks').dataTable( {
"sPaginationType": "bootstrap",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "{{ URL::to('tasks/getTable') }}"
});
});
</script>
You also need to reference the following files in your page
http://code.jquery.com/jquery-1.10.2.min.js
and
http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js
and also add the Controller/getTable method to your routes file (in the example above I wrote it as tasks/getTable
If you need features like filters, sorting, etc., try Nayjest/Grids package for Laravel. If you need just simple table -- previous response is preferred.
Related
I am trying to add datatable in my Laravel 9 project (I use Vite).
I noticed it doesn't work because I'm getting these two errors:
First error:
$ is not defined
Second error:
jQuery is not defined
This is my complete code:
bootstrap.js
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('datatables.net');
} catch (e) {}
app.js
import './../../node_modules/datatables.net/js/jquery.dataTables';
view
<table id="tableclient" class="table table-bordered table-striped table-hover sizethtd">
<tr>
<th class="">Name</th>
<th class="">Email</th>
<th class="">Address</th>
<th class="">Action</th>
</tr>
#foreach ($clients as $client)
<tr>
<td>{{ $client->name }}</td>
<td class="">{{ $client->email }}</td>
<td class="">{{ $client->address }}</td>
<td>
<a class="btn btn-info" href="{{route('project.create', compact('client'))}}">Add</a>
</td>
</tr>
#endforeach
</table>
<script>
$(function () {
$('#tableclient').DataTable({
processing: true,
serverSide: false
});
});
</script>
vite.cofig.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
],
});
Could anyone kindly help me?
UPDATE
I installed jquery via the command
npm i jquery
and in app.js I imported, along with datatable, the following line:
import './../../node_modules/jquery/src/css';
The error still continues to exist
You're just missing jQuery. There's various ways to add jQuery,one quick way but not idael way is to add by cdn
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
https://releases.jquery.com/
It seems you are missing the Jquery CDN link.
You may use
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
Or By Installing it manually, by:
npm install jquery
or
yarn add jquery
Inside your bootstrap.js or app.js use
window.$ = window.jQuery = require('jquery')
Then require js/app.js inside your app.
just a very new to Vue 2.0, i actually use if for Laravel 5.4, now you can see from below link that i created one component which name is "canvas-chart", what actually i want show is a filterable table, and then to get more Json data from next steps, but now it always show me "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option." , can not understand that i follow the official documentation to use it why it's not work?
new Vue({
el:'#filterTest',
data:{
keywords:[{"id":"9","name":"missy","phone":"21324234532"},
{"id":"3","name":"Mahama","phone":"345604542"},
{"id":"2","name":"Bernard","phone":"241242542"}]
},
computed: {
filterM: function () {
var self = this
return self.filter(function (word) {
return user.name.indexOf(self.searchQuery) !== -1
})
}
}
});
Vue.component('canvas-chat',{
template:'#canvasChart',
props:['keywordsData']
})
<script type="text/x-template" id="canvasChart">
<table>
<thead>
<tr>
<th v-for="key.id in keywordsData">
<span class="arrow" ></span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="key.name in keywordsData">
<td v-for="key.phone in keywordsData"> {{key.name}}</td>
</tr>
</tbody>
</table>
</script>
<div id="filterTest">
<canvas-chat keywordsData="keywords" ></canvas-chat>
</div>
You have a few issues:
You must register the canvas-chat component first before you use it in the main component (put Vue.component('canvas-chat', ... before new Vue(...)).
Your v-for loops are wrong. They should be like v-for="key in keywordsData", not v-for="key.id in keywordsData".
The v-fors on the tr and td elements don't make sense; you will have to process the keywordsData first (perhaps in a computed property) to get it into the correct format you want, then loop over that.
You must bind the keywordsData prop in the template like this: :keywords-data="keywords".
I'm working on a project using codeigniter. I'm trying to use datatables to view data fetched by ajax. the network tab shows that the ajax returned values correctly but the function is marked as 404 and I get this error
"DataTables warning: table id=data - Ajax error. For more information about this error, please see http://datatables.net/tn/7"
Here's the ajax in the network tab
I checked the response and it's correct. I've opened the ajax function like this: domain.com/module/controller/merchantsTable and I got correct data
{ "merchantsdata":[{"id":"6","email":"user#mail.com"},{"id":"7","email":"user2#mail.com"}]}
datatables code [updated: added 'processing' and 'serverSide']
<table id="data">
<thead>
<tr>
<th>id</th>
<th>email</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>email</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
//base_url refers to https://www.domain.com/
$(function () {
$('#data').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "<?=base_url()?>merchants/admin_merchants/merchantsTable",
"columns": [
{ "merchantsdata": "id" },
{ "merchantsdata": "email"}
],
"order":[0 , 'desc'],
"lengthMenu": [[20, 50, -1], [20, 50, "All"]]
} );
});
So how to fix this issue and make it work?
change to
<table id="data">
<thead>
<tr>
<th>id</th>
<th>email</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>id</th>
<th>email</th>
</tr>
</tfoot>
</table>
Worked without modifying the code. My mistake, there was another folder in the root named 'merchants' so ajax didn't fetch data from the codeigniter route path (merchants module) but from the folder in the root which is wrong so I renamed the folder in the root and it worked.
I have the following KendoUI template bound to an observable. When I push a new item to the observable array, how do I apply the kendoNumericTextBox to only the new item in the template?
If I apply by class, it has a strange effect of doubling the spinners on the existing numeric textboxes.
<div id="slots">
<table class="table table-striped table-condensed" style="width:auto;">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Volunteers Needed</th>
<th>
Reservation Passcode <i class="icon-question-sign" title ="Only people with the reservation passcode can signup."></i>
</th>
</tr>
</thead>
<tbody data-template="row-template" data-bind="source: slots">
</tbody>
</table>
</div>
$(document).ready(function () {
var viewModel = kendo.observable({
slots: [{DateText:'1/8/1969', ShiftLabel: "3:00 to 5:00",Slots:2,ReservationCode:"ABC" }]
});
kendo.bind($("#slots"), viewModel);
$(".numeric").kendoNumericTextBox({
format: "n0"
});
viewModel.slots.push({DateText:'1/8/1969', ShiftLabel: "3:00 to 5:00",Slots:2,ReservationCode:"ABC" });
$(".numeric").kendoNumericTextBox({
format: "n0"
});
});
Thanks for any help!
Try defining your template as:
<script type="text/x-kendo-tmpl" id="row-template">
<tr>
<td>#= DateText #</td>
<td>#= ShiftLabel #</td>
<td class="numeric"><input data-role="numerictextbox" data-format="n0" data-bind="value: Slots"></td>
<td>#= ReservationCode #</td>
</tr>
</script>
and remove the $(".numeric").kendoNumericTextBox(...) initializations. Doing this you should have a NumericTextBox each time the template is run (one per row).
Your JavaScript is like this:
$(document).ready(function () {
var viewModel = kendo.observable({
slots: [
{DateText: '1/8/1969', ShiftLabel: "3:00 to 5:00", Slots: 2, ReservationCode: "ABC" }
]
});
kendo.bind($("#slots"), viewModel);
viewModel.slots.push({DateText: '1/8/1969', ShiftLabel: "3:00 to 5:00", Slots: 3, ReservationCode: "ABC" });
});
See it running here http://jsfiddle.net/OnaBai/BV48W/
Why:
The fact that you use a CSS class (.numeric) causes you end up having a KendoUI Numeric Text Box inside the other.
Example: You have the following HTML:
<label>Number 1: <input id="number1" class="numeric"/></label>
<label>Number 2: <input id="number2" class="numeric"/></label>
And the JavaScript
$(document).ready(function () {
$(".numeric").kendoNumericTextBox({
format: "n0"
});
$(".numeric").kendoNumericTextBox({
format: "n0"
});
});
You will see what you called strange effect of doubling the spinners on the existing numeric textboxes.
Each time that you invoke kendoNumericTextBox using .numeric selector you add one extra spinner to the element. If it does not have a spinner (data just added to viewModel) it gets one but if then you add data and invoke kendoNumericTextBox using .numeric selector, that previous element gets another.
I am trying to run this server side example for jquery datatable, but it keeps on giving the JSON format error.
My jsp code looks like this -
<script>
$(document).ready(function () {
$("#companies").dataTable({
"bServerSide": true,
"sAjaxSource": "/dummySearchProposals",
"sPaginationType": "full_numbers",
"iDisplayLength":3,
"bJQueryUI": true,
});
});
</script>
<body id="dt_example">
<div id="container">
<div id="demo_jui">
<table id="companies" class="display">
<thead>
<tr>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
and the ajax listener's return object is created using this -
String[] data1 = {"1","a1","a2"};
String[] data2 = {"2","b1","b2"};
String[] data3 = {"3","c1","c2"};
JSONArray data = new JSONArray();
data.put(data1);
data.put(data3);
data.put(data2);
outputData.put("sEcho", queryString.get("sEcho"));
outputData.put("iTotalRecords", "99");
outputData.put("iTotalDisplayRecords", "3");
outputData.put("aaData", data);
Manually going to the ajax link, returns this -
{iTotalDisplayRecords=3, iTotalRecords=99, aaData=[["1","a1","a2"],["3","c1","c2"],["2","b1","b2"]], sEcho=1}
Can anyone please suggest, what I might be doing wrong here.
That doesn't look like json data that you're getting back from the call. Here is a simple example of a json formatted object.
JSON- name value pairs separated by colons, each pair separated by commas. I threw in array below for good measure.
{"xxx":1, "yyyyy": 2, "z": [1,2,3,4]}