I recently took over the development of a website that uses datatables. The site is built using Laravel 4.
I am new to datatables. I was wanting to know if it were possible to have the datatable load but not display any output/rows. The information would only show up once the user fills out the search bar.
I have gone over some of the available documentation on the datatables.net but haven’t found what I am looking for.
EDIT:
Here is a code snippet:
table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing1 _START_ to _END_ of _TOTAL_ entries1",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "Show _MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
},
// "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
"columns": [{
"orderable": true
},{
"orderable": true
},{
"orderable": true
}, {
"orderable": false
}],
"lengthMenu": [
[5, 10, 20, 100, -1],
[5, 10, 20, 100, "All"] // change per page values here
],
// set the initial value
"pageLength": 10,
"pagingType": "bootstrap_full_number",
"language": {
"search": "Search Patient: ",
"lengthMenu": " _MENU_ records",
"paginate": {
"previous":"Prev",
"next": "Next",
"last": "Last",
"first": "First"
}
},
"columnDefs": [{ // set default column settings
'orderable': false,
'targets': [0]
}, {
"searchable": false,
"targets": [1]
}, { // set default column settings
'orderable': false,
"bVisible": false,
'targets': [4]
}],
"order": [
[4, "asc"]
] // set 5th column as a default sort by asc
});
Take a look at the Server-side processing example.
Let Laravel return an empty array by default so the table data is empty. It will call the ajax script on every "change" so once a user searches for anything, you can return the queried data.
More examples and docs can be found here: https://datatables.net/examples/server_side/index.html
If you're using a package, you should also check the documentation for that version.
Related
I am creating a Classic layout using rows, column and measure. I want to add a static column( without doing any sum/average) as a last column. How can this be achieved?
Given the following configuration:
"rows": [
{
"uniqueName": "Type",
"sort": "desc"
},
{
"uniqueName": "SubCategory"
}
],
"columns": [
{
"uniqueName": "Month"
},
{
"uniqueName": "Measures"
}
],
"measures": [
{
"uniqueName": "Amount",
"aggregation": "sum",
"format": "02fecc33bec74ccd9c8a0835259938f0"
},
{
"uniqueName": "Budget",
"formula": "min('BudgetAmount') ",
"caption": "Budget"
}
]
How can I display “Budget” column, which is static and will be the same, only once; whilst “Amount” is categorized by “Month”?
Can you please help me with an example incase it can be achieved by creating an additional instance of WebDataRocks to display the “Budget” measure with the desired configuration? I am not sure how this can be done.TIA
There is no built-in solution because, as a general rule, the pivot table approach does not allow adding fixed columns.
As a workaround, you can create the second component with following slice:
slice: {
rows: [{
uniqueName: "Type",
sort: "desc"
},
{
uniqueName: "SubCategory"
},
],
columns: [{
"uniqueName": "[Measures]"
}],
measures: [{
uniqueName: "Budget",
formula: "min('BudgetAmount') ",
caption: "Budget",
}]
}
}
I have 3 questions about captions (data localizations):
How to provide caption for a field not included in slice object
Why are captions ignored in: toolbar -> fields -> all fields -> any measure field
Why are captions ignored while adding calculated value: toolbar -> fields -> add calculated value -> any row or column field
Check out this js fiddle
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
height: 395,
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
},
"slice": {
"rows": [{
"uniqueName": "Category",
"caption": "Category_Localized"
}
],
"columns": [{
"uniqueName": "Color",
"caption": "Color_Localized"
}],
"measures": [{
"uniqueName": "Price",
"aggregation": "sum",
"caption": "Price_Localized"
}
]
}
}
});
It seems like all these features are currently not working as expected.
As a workaround to the first question though you can simply change the field names in the CSV file you're feeding to the pivot table.
I'm using Laravel 8.20.1 and my API route returns a paginated JSON response.
Is there a better way than str_replace() to remove the arrows from the labels?
routes/api.php:
Route::middleware('auth:sanctum')->get('/items', function (Request $request) {
return new ItemCollection(Item::paginate(5));
});
response.data.meta
{
"current_page": 1,
"from": 1,
"last_page": 3,
"links": [
{
"url": null,
"label": "« Previous",
"active": false
},
....
{
"url": "http://localhost/api/items?page=2",
"label": "Next »",
"active": false
}
],
"path": "http://localhost/api/items",
"per_page": 5,
"to": 5,
"total": 15
}
Those labels for Next and Previous are in the translation files, resources/lang/en/pagination.php. If you look at Illuminate\Pagination\LengthAwarePaginator::linkCollection you can see it building the links part of the response.
I have API Call abd which will be returning Json like below
{
"status": true,
"message": "Data Sent",
"data": [
{
"id": 9,
"name": "North",
"colType": 7,
"userID": 0,
"isVisible": false
}
]
}
And below i have JavaScript Ajax Call but it is returning Empty datatable please do help
$('#myTable').DataTable({
destroy: true,
responsive: true,
"ajax": {
"url": url+'/api/CommonMasters/7/GetByUserID/'+#ViewBag.UID,
"type": "GET",
"datatype": "json",
},
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"columns": [
{ "data": "name", "autoWidth": true },
{
"render": function (data, type, full, meta) { return "<a id='Edit' class='btn btn-info' onclick='editRefUser(" + full.id + ")' ;>Edit</a>"; }
},
]
});
In the ajax section, you need to define your data source: "dataSrc": "data".
"ajax": {
"url": url+'/api/CommonMasters/7/GetByUserID/'+#ViewBag.UID,
"type": "GET",
"datatype": "json",
"dataSrc": "data"
},
Why is this needed? Your JSON data structure does not have a "name" item at the top level. Names are nested inside the top-level "data" object. This extra directive tells DataTables to look only at the JSON's "data" object as its starting point.
See here for the related documentation:
The ajax option basically inherits all of the options made available by jQuery.ajax, but we provide the extra option of dataSrc to provide the ability to alter what data DataTables will read from the JSON returned from the server...
Also, on an unrelated note, I don't think you need this: destroy: true - try removing it. It probably does not make sense to try to destroy the table object while you are initializing it.
My REST contorller:
#GetMapping("/test")
public Page<MyObject> pathParamTest(Pageable pageable) {
return myService.getPage(pageable);
}
I send a request like following:
localhost:8091/endpoint/test?page=0&size=3&sort=id&direction=DESC
It's my response from server:
{
"content": [
{
"id": 1
},
{
"id": 2
},
{
"id": 3
}
],
"last": true,
"totalPages": 1,
"totalElements": 3,
"first": true,
"sort": [
{
"direction": "ASC",
"property": "id",
"ignoreCase": false,
"nullHandling": "NATIVE",
"descending": false,
"ascending": true
}
],
"numberOfElements": 3,
"size": 3,
"number": 0
}
but the request has still direction = ASC.
How can I send to server direction = DESC?
And why response has a field "last" = true, because next page has one element more?
try
localhost:8091/endpoint/test?page=0&size=3&sort=id,DESC
from spring data rest 6.2. Sorting
curl -v
"http://localhost:8080/people/search/nameStartsWith?name=K&sort=name,desc"
sort Properties that should be sorted by in the format
property,property(,ASC|DESC). Default sort direction is ascending. Use
multiple sort parameters if you want to switch directions, e.g.
?sort=firstname&sort=lastname,asc.