I am using DataTable with serverSide processing, there is a menu to export the data but it will only export the data that was loaded. Is there a setting in the buttons section to get all the data without using the page limiting the export? So if the page load page 1 with 50 records and there are three other pages with 50 records the export will all 150 rows of data? I did try this https://datatables.net/forums/discussion/59216/customizing-the-data-from-export-buttons#latest but its not working. The GetDataToExport is never called there are not errors. I have included the html because I am not sure if its getting bypass.
buttons: [
{
extend: 'print',
title: $(actions).closest("div").find(".caption").text(),
exportOptions: {
orthogonal: 'export',
columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
},
{
extend: 'pdf',
orientation: 'landscape',
title: $(actions).closest("div").find(".caption").text(),
exportOptions: {
orthogonal: 'export',
columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
},
{
extend: 'csv',
title: $(actions).closest("div").find(".caption").text(),
exportOptions: {
orthogonal: 'export',
columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
customizeData: function (d) {
var exportBody = GetDataToExport();
console.log('exportBody');
d.body.length = 0;
d.body.push.apply(d.body, exportBody);
}
}
}
]
function GetDataToExport() {
console.log('Not Getting Called');
var jsonResult = $.ajax({
url: 'GetPermissions.ashx?page=all',
data: { search: $("#search").val() },
success: function (result) { },
async: false
});
var exportBody = jsonResult.responseJSON.data;
return exportBody.map(function (el) {
return Object.keys(el).map(function (key) { return el[key] });
});
}
HTML
<div class="btn-group">
<a class="btn btn-default btn-sm" href="javascript:;" data-toggle="dropdown">
<i class="fa fa-share"></i>
<span class="hidden-xs">Export </span>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right permissions_tools" id="permissions_tools">
<li>
<a href="javascript:;" data-action="0" class="tool-action">
<i class="icon-printer"></i>Print
</a>
</li>
<li>
<a href="javascript:;" data-action="1" class="tool-action">
<i class="icon-doc"></i>PDF
</a>
</li>
<li>
<a href="javascript:;" data-action="2" class="tool-action">
<i class="icon-cloud-upload"></i>CSV
</a>
</li>
</ul>
</div>
updated
<li>
<a id="exportAllData" data-action="3" class="tool-action">
<i class="icon-cloud-upload"></i>ALL CSV
</a>
</li>
Related
Is it possible in VueJs to display my blocks sorted by "block.position" value, and update all block position when I click on a "UP" or "DOWN" button?
I want to have my blocks in correct order in my "blocks" array, reflect the index position on the "block.position" value, and display all my blocks in a correct order.
<template>
<div>
<div class="mb-5" v-for="(block, index) in blocks" :key="block.id">
<div class="btn btn-primary" #click="move(index,index-1)" v-if="index">
<span class="fa fa-arrow-up"></span>
</div>
<div class="btn btn-primary"
#click="move(index,index+1)" v-if="index !== (blocks.length - 1)">
<span class="fa fa-arrow-down"></span>
</div>
<h3 class="text-uppercase text-info"><u>{{ block.name }}</u> - {{ block.position }}</h3>
<div v-for="field in block.fields" :key="field.id">
<p>{{ field.name }}</p>
<div class="mb-3">
<div v-if="field.type === 'textarea'">
<textarea
:required="field.required"
:placeholder="field.attr ? field.attr.placeholder : null"
:value="field.data"
/>
</div>
<div v-else>
<input
:type="field.type"
:required="field.required"
:placeholder="field.attr ? field.attr.placeholder : null"
:value="field.data"
/>
</div>
<div class="alert alert-danger" v-for="error in field.errors">
{{ error }}
</div>
</div>
</div>
<hr class="border-light">
</div>
<ul class="list-unstyled d-block">
<li class="d-inline-block">
<button class="btn btn-light" v-on:click="addParagraph">
Add Paragraph
</button>
</li>
<li class="d-inline-block ml-3">
<button class="btn btn-light" v-on:click="addImage">
Add Image
</button>
</li>
</ul>
</div>
</template>
<script>
// Going to use this neat array function
Array.prototype.move = function (from, to) {
this.splice(to, 0, this.splice(from, 1)[0]);
return this;
};
export default {
name: 'BlockForm',
created() {
// Tri dans le tableau les blocks par "block.position".
this.updateBlockPosition();
},
data() {
return {
blocks: [
{
id: 0,
type: 'paragraph',
name: 'Paragraphe',
position: '1',
fields: [
{
id: 0,
type: 'textarea',
name: 'Saisissez votre texte ci-dessous',
required: true,
data: null,
errors: [
'Lorem ipsum sir dolor emet',
],
},
],
},
{
id: 1,
type: 'image',
name: 'Image',
position: '2',
fields: [
{
id: 0,
type: 'file',
name: 'Sélectionner une image',
required: false,
placeholder: null,
data: null,
errors: [],
},
{
id: 1,
type: 'text',
name: 'Description de l\'image',
required: false,
placeholder: null,
data: null,
errors: [],
},
],
},
{
id: 2,
type: 'image',
name: 'Image',
position: '3',
fields: [
{
id: 0,
type: 'file',
name: 'Sélectionner une image',
required: false,
placeholder: null,
data: null,
errors: [],
},
{
id: 1,
type: 'text',
name: 'Description de l\'image',
required: false,
placeholder: null,
data: null,
errors: [],
},
],
},
],
};
},
methods: {
addParagraph() {
this.blocks.push({ ...this.blocks[0] });
this.updateBlockPosition();
},
addImage() {
this.blocks.push(this.blocks[1]);
this.updateBlockPosition();
},
move(from, to) {
this.blocks.move(from, to);
this.updateBlockPosition();
},
updateBlockPosition() {
this.blocks.forEach((block, index) => {
block.id = index + 1;
block.position = index + 1;
});
},
},
};
</script>
What I am doing wrong?
I am trying to get the delete button to delete one person data.
<li v-for="(person,index) in persons">
<span v-for="value in person"> {{ value }} </span>
</li>
<button #click.native="deleteQuote">
Delete
</button>
data: {
ingredients: ['meat', 'fruit', 'salad'],
persons: [
{name: 'Max', age: 27, color: 'red'},
{name: 'Mit', age: 47, color: 'red'},
{name: 'Foo', age: 37, color: 'red'},
]
},
methods: {
deleteQuote: function(person) {
this.persons.splice(index, 1);
}
}
})
Put button element inside the li tag and remove the native modifier and pass the index as a parameter to the deleteQuote method:
<li v-for="(person,index) in persons">
<span v-for="value in person"> {{ value }} </span>
<button #click="deleteQuote(index)">
Delete
</button>
</li>
the method should be defined with index as a parameter :
methods: {
deleteQuote: function(index) {
this.persons.splice(index, 1);
}
}
sorry I'm still new to reactive vue models and updating I'm trying to draw a line through an input element if a box is checked.
so far I have this setup:
data: {
selected: null,
checked: null,
list: [
{
id: 0,
category: 'Bakery',
food: ['bread','muffins','pie']
},
{
id: 1,
category: 'Fruits',
food: ['apple','bananna','orange']
},
{
id: 2,
category: 'Diary',
food: ['cheese','milk','yogurt']
}
],
isHidden: true,
form: {},
},
my html is as follows (this is a single page app)
<li v-for="food in item.food" class="list-group-item">
<input :class="{marked:food == checked}" #click="checked = food" type="checkbox"> {{ food }}</input>
</li>
this is the css i'm trying to implement
.marked{
text-decoration: line-through;
}
I'm not sure what I need to do to my #click to make it work but so far nothing happens and the class is not applied. Can someone give me tips?
An <input> element can't have content.
So you've got this structure:
<input>{{ food }}</input>
But that's misleading as the <input> tag will be closed automatically. What you'll end up with will actually be some text next to a checkbox, not inside it.
You probably want something similar to this:
<label :class="{marked: food === checked}" #click="checked = food">
<input type="checkbox"> {{ food }}
</label>
There are some other problems involving deselection and multiple selections. I've tried to fix those in the example below:
new Vue({
el: '#app',
data: {
checked: [],
list: [
{
id: 0,
category: 'Bakery',
food: ['bread','muffins','pie']
},
{
id: 1,
category: 'Fruits',
food: ['apple','bananna','orange']
},
{
id: 2,
category: 'Diary',
food: ['cheese','milk','yogurt']
}
]
}
})
.marked{
text-decoration: line-through;
}
<script src="https://unpkg.com/vue#2.6.11/dist/vue.js"></script>
<div id="app">
<ul v-for="item in list">
<li v-for="food in item.food" class="list-group-item">
<label :class="{marked: checked.includes(food)}">
<input type="checkbox" v-model="checked" :value="food">{{ food }}
</label>
</li>
</ul>
</div>
I am using laravel datatable package, all things work fine. I have a problem with relational column searching. Let me elaborate more:
I have two tables:
ed_class (primary table)
ed_section(secondary table)
Here the result of above tables with relationship between them.
Main data is coming from ed_section table and by making relationship i am getting classes names from ed_class table. As the data is coming from ed_section table so datatable column searching works fine on section name column but it's not working on class name column, so how to implement searching on class name column too.?
Here's datatable js code:
$(function() {
$('#table').DataTable({
"pageLength": 25,
"ordering": false,
//"columnDefs": [{
//"targets": 7,
//"orderable": false
//}],
processing: true,
serverSide: true,
ajax: '{!! url('sections/data') !!}',
columns: [
{ data: 'sr_no', name: 'sr_no' },
{ data: 'classid', name: 'classid' },
{ data: 'sectiontitle', name: 'sectiontitle' },
{ data: 'Option', name: 'Option' }
]
});
});
And here's server side code (using laravel datatable package):
public function data(){
$model = Section::all();
$data = Datatables::of($model);
$data = $data->addColumn('sr_no', function(Section $section){
})->editColumn('classid', function(Section $section){
return $section->studentClass->classtitle;
})->addColumn('Option', function(Section $section) {
return '<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-left">
<li><a class="edit_section" data-id='.$section->sectionid.'> <i class="fa fa-edit" data-toggle="tooltip" title="" data-original-title="Edit"></i> Edit</a></li>
<li role="separator" class="divider"></li>
<li> <i class="fa fa-trash-o" data-toggle="tooltip" title="" data-original-title="Delete"></i> Delete</li>
</ul>
</div>';
})->rawColumns(['Option']);
$sections = $data->make(true);
return $sections;
}
And this is model relationship:
class Section extends Model {
public function studentClass(){
return $this->belongsTo('App\Classes','classid','classId');
}
}
Try Like this,
$orders = Order::with('user');
return Datatables::of($orders)
->addColumn('user', function ($order) {
return $order->user->->name;
})
In view :
{ "data": "user" , name : "user.name"},
I have find solution and want to share so that it can help others too: Here's server side code in controller (using laravel datatable package):
public function data(){
$model = Section::with('studentClass');
$data = Datatables::of($model);
$data = $data->addIndexColumn()
->editColumn('classid', function(Section $section){
return $section->studentClass->classtitle;
})->addColumn('Option', function(Section $section) {
return '<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-left">
<li><a class="edit_section" data-id='.$section->sectionid.'> <i class="fa fa-edit" data-toggle="tooltip" title="" data-original-title="Edit"></i> Edit</a></li>
<li role="separator" class="divider"></li>
<li> <i class="fa fa-trash-o" data-toggle="tooltip" title="" data-original-title="Delete"></i> Delete</li>
</ul>
</div>';
})->rawColumns(['Option']);
$sections = $data->make(true);
return $sections;
}
Here's datatable js code:
$(function() {
$('#table').DataTable({
"pageLength": 25,
"ordering": false,
"columnDefs": [
{ "searchable": false, "targets": [0,3] }
],
processing: true,
serverSide: true,
ajax: '{!! url('sections/data') !!}',
columns: [
{ data: 'DT_Row_Index', name: 'DT_Row_Index' },
{ data: 'classid', name: 'studentClass.classtitle' },
{ data: 'sectiontitle', name: 'sectiontitle' },
{ data: 'Option', name: 'Option' }
],
"oLanguage": {
"sSearch": "Search Class: "
}
});
});
My code :
<ul id="filter"><li>All</li>
<li>In source</li>
<li>Out source</li></ul>
<div v-for="asessesment in listAssesmentList">
<li>In source - Jhon</li>
<li>Out source - Ryan</li>
Can I filter In source or Out source using in vueJs?
Thanks in advance
Are you mean this ??
var vm = new Vue({
el: '#app',
data: {
sources: [{
name: 'In Source',
lists: [
'John', 'Ryan', 'Matt'
]
}, {
name: 'Out Source',
lists: [
'Mimi', 'Mike', 'Edrick'
]
}],
filterText: ''
},
methods: {
filter: function(name) {
this.filterText = name;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js"></script>
<div id="app">
<ul>
<li>All
</li>
<li>In Source
</li>
<li>Out Source
</li>
</ul>
<ul v-for="source in sources | filterBy filterText in 'name' ">
<li>
{{ source.name }}
<ol>
<li v-for="user in source.lists | orderBy 'user'">{{ user }}</li>
</ol>
</li>
</ul>
</div>
https://jsfiddle.net/quetzalarc/LdcdLqe3/2/