Ok, so unfortunately I have come across this issue. So first a little about specs of my app.
I am using
Vue.js
vue-resource.js
jQuery
jQuery DataTables
Now because I'm grabbing the data through vue-resource, for some reason when the ajax call is final finished and vue imports the data to the table, datatables decides not to render pagination, and displays all 200 results on one page. Is there anyway to refresh datatables so it is rendered with pagination after it has been imported into the table?
My ajax call:
this.$http.get('getDispachedEmails', function(data){
console.log(data['orders']);
this.customers.push(data['orders']);
var dt = $('#myTable').DataTable();
});
My Table:
<table id="myTable" class="u-full-width">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr v-repeat="customers[0]">
<td>#{{ firstName }} #{{ lastName }}</td>
<td>#{{ email }}</td>
<td>#{{ trackingNumber }}</td>
<td>#{{ address }}</td>
</tr>
</tbody>
</table>
EDIT
I have found out that none of the functions work. If i try to select any row, the table is instantly cleaned. My model (vue model) still has all the objects inside.
SOLUTION:
I just set a wait time to initiate data tables after I collect the data via ajax request. It's a little ghetto, but a least it works. If I find a better fix Ill edit this post.
this.$http.get('getDispachedEmails', function(data){
console.log(data['orders']);
this.customers.push(data['orders']);
setTimeout(function(){$('#myTable').DataTable();}, 5000);
});
A delay of 0 did the trick for me, although not sure why.
setTimeout(function(){$('#myTable').DataTable();}, 0);
I've built a dedicated vue grid component: vue-tables . You might want to check it out.
Related
I'm trying to display a table of flowers but it won't show. I'm not sure how to use my data to display them. any help would be appreciated
<b-table>
<thead>
<tr>
<th>Name</th>
<th>Petals</th>
</tr>
</thead>
<tbody>
<tr v-for="flower in flowers" :key="flower.id">
<td>{{ flower.name }}</td>
<td>{{ flower.petal }}</td>
</tr>
</tbody>
</b-table>
That is not how <b-table> is used.
You supply <b-table> with an array, via the items prop, and it will generate the table itself. Which can be further customized by using other props and slots.
I would suggest you look at a few of the examples, to understand how the basics work.
https://bootstrap-vue.org/docs/components/table#tables
If you want to write the structure yourself, you should use <b-table-simple>.
https://bootstrap-vue.org/docs/components/table#simple-tables
I am in the process of learning with this framework (Vuejs) and I need to find a way to add a page in a table, by which, it should be expanded as more objects are added and then list them in the table and limit the number of items to show by tab.
The table used is the following.
<table class="table table-responsive">
<thead>
<tr>
<th>Título</th>
<th>Tipo</th>
<th>Categoría</th>
<th>Fecha creación</th>
<th>Acción</th>
</tr>
</thead>
<tbody>
<tr :key="post.IDEN_PUBLICACION" v-for="post in posts" v-if="!post.FLAG_VALIDADO && !post.FLAG_BAN">
<td>{{post.NOMB_PUBLICACION}}</td>
<td>{{post.CODI_TIPO_PUBLICACION == 'P' ? 'Producto' : 'Servicio' }}</td>
<td>{{post.categoria.NOMB_CATEGORIA}}</td>
<td>{{post.FECH_CREACION | dateFormat}}</td>
<td>
<a class="btn btn-success" #click="acceptPost(post)" title="Aceptar"><icon name="check"></icon></a>
<a class="btn btn-danger" #click="ban(post)" title="Rechazar"><icon name="times"></icon></a>
</td>
</tr>
</tbody>
</table>
Searching, I found that there are plugins that can help this time, but if I manage to implement it visually, I do not know how to start developing the behavior I need.
I try with 'vue-paginate'.
<!--Paginación de tabla -->
<template>
<paginate
:page-count="5"
:page-range="1"
:margin-pages="1"
:click-handler="recorrerTabla"
:prev-text="'Anterior'"
:next-text="'Siguiente'"
:container-class="'pagination'"
:page-class="'page-item'">
</paginate>
</template>
this method I only used it to check functionality
methods: {
acceptPost (post) {
controller.acceptPost(this, post)
},
recorrerTabla: function (pageNum) {
console.log(pageNum)
},
n summary, I would like that the table shows 5 items per tab of the table and that the pager allows me to see in another tab the following 5 items. If this is possible, add that the number of pages fits the total of items, it would be great.
Image from the view
Technologies used:
Vuejs 2.4 Node 8+ Nuxt 1.0.0 - RC11 Nuxt / Axios 4.5.0 JWT-Decode 2.2.0 Js-Cookie Vee-Validate
In advance, thanks for your answers and any documentation or example of help.
So I have this datatable that is generated by php dynamically once. But once it's loaded, I don't want to reload the whole table since there's only a small javascript if statement that I am doing. When you press the button, I compare a data attribute that is on my tr. If it doesn't fit, I'd like to hide them, else, I'd like to show them. So here is what I tried so far.
HTML
<div style="margin: 30px 0;">
<button class="btn btn-primary" id="myClientButton">Voir mes clients seulements</button>
</div>
<table id="advancedSearchTable">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>Subject</th>
<th>Date</th>
<th>Profile</th>
</tr>
</thead>
<tbody>
{% for entity in entities %}
<tr data-user="{{ entity.user.id }}" class="values">
<td>{{ entity }}</td>
<td>{{ entity.mainphone }}</td>
<td>{{ entity.email }}</td>
<td>{{ entity.tagline }}</td>
<td>{{ entity.createdDate|date('d-m-Y') }}</td>
<td><span class="glyphicon glyphicon-eye-open"></span></td>
</tr>
{% endfor %}
</tbody>
</table>
The Loop is made in Symfony 2 (Using Twig Template, if you don't understand it it doesn't really matter) all you have to understand is that the attribute on "data-user" is created by PHP and that every entry of my database is going in this loop.
Then, in jQuery I have this:
<script>
$('#advancedSearchTable').DataTable(
{
"language": {
"url": "//cdn.datatables.net/plug- ins/9dcbecd42ad/i18n/French.json"
},
responsive: true
});
$('#myClientButton').on('click', function(){
if ($(this).hasClass('active')){
$(this).removeClass('active');
$('tr.values').show();
}
else{
$(this).addClass('active');
$('tr.values').each(function(){
if ($(this).attr('data-user') != 5){
$(this).hide();
}
});
}
});
</script>
It works very well. The only problem is that the DataTable then is not "replacing itself". So, for example, if it has 25 pages, it keeps 25 pages and when you press on the "next table page" button, it refreshes the "table page" and things are not hidden anymore. I searched alot but I couldn't find a way. I really don't want to use ajax for this, since it only need to be filled once with value and then it will only have to hide or show depending on the button being active or not... Is it even possible using this jQuery plugin ?
Thanks in advance.
Yes, it is indeed possible, but you will need a different approach. Hiding rows with jQuery and not through dataTables itself is generally a bad idea, since dataTables is not aware of changes made to the original <table> element in DOM. There is no "somewhere-in-code-another-script-has-hidden-a-row"-event dataTables can hook into. That is why dataTables seems to "forget" changes, it is simply not aware of those changes, and the dataTables internals stay untouched.
So use a custom filter instead. The following small piece of code does what you want - hiding all rows having a data-user attribute different than 5. It works across sorting and pagination. The last piece of code is an example of a reset-button.
$("#hide").click(function() {
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
return $(table.row(dataIndex).node()).attr('data-user') == 5;
}
);
table.draw();
});
$("#reset").click(function() {
$.fn.dataTable.ext.search.pop();
table.draw();
});
demo -> http://jsfiddle.net/d5hre2ux/
According to this https://datatables.net/examples/plug-ins/range_filtering.html it is possible to use data parameter to filter by any value shown on the table.
$("button").click(function() {
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
return data[3] != "63";
}
);
table.draw();
});
I created an ASP.NET page that sends some request and gets results.
After I get the results I format it into the HTML table. The results can be different by number of columns and rows.
After that I am trying to use datatables to get it formated and easy to view and search, and it works fine, but only the first time it is called. (I get results on button click.)
For example, let's say I only get 1 parameter and value (name-status, value-ok), and it will be shown like this under, and that is ok
status
ok
but after i call it again, let's say I will get the same respond results, the results are shown like this
status status
ok
ok
for every next call the output table will stay the same, it will show the first result I get, and the last one
how can I get rid of the first one?
I tried destroying datatable, tblResults, old values in results- pretty much everything that came to my mind
HTML table:
<table id="tblResults">
<thead id="tblHead">
<tr data-bind="foreach: reportHeaders">
<th data-bind="text: $data"></th>
</tr>
</thead>
<tbody data-bind="foreach: reportResults">
<tr data-bind="foreach: rowArray">
<td data-bind="text: $data"></td>
</tr>
</tbody>
</table>
self.reportResults.removeAll();
self.reportHeaders.removeAll();
ko.mapping.fromJS(results.d.results, mappingReportResults, self.reportResults);
ko.mapping.fromJS(results.d.header, self.reportHeaders);
oTable = $('#tblResults').dataTable();
In my application results are displaying as a table format.
Part of my code is,
{% for device in devices %}
<tr>
<td>{{ device.operator}}</td>
<td>{{ device.state }}</td>
<td>{{ device.tstampgps }}</td>
<td><button id='rec_delete'>Delete</button></td>
</tr>
{% endfor %}
Even if we press the delete button, I need to delete the particular record from the database. before that I want to prompt a confirmation box for that.
Can anyone help me?
Add a unique record Identifier that you can associate to DB to the button. Once confirmed you send this identifier to server with AJAX and sever code does the DB delete. Also change ID to class on repeating elements since ID's must be unique
HTML
<tr>
<td>{{ device.operator}}</td>
<td>{{ device.state }}</td>
<td>{{ device.tstampgps }}</td>
<td><button class='rec_delete' data-record_id="{{ device.DB_ID }}">Delete</button></td>
</tr>
JS
$('button.rec_delete').click(function(){
/* data() method reads the html5 data attribute from html */
var record_id=$(this).data('record_id');
if( confirm( 'Are you sure') ){
$.post( 'serverPage.php', { id: record_id}, function(){
/* code to run on ajax success*/
$(this).closest('tr').remove();
})
}
})
Server will receive the post key id as you would with any other form element name
Since I don't know Django, this doesn't include the delete part, which I assume you will AJAXify that (do an asynchronous request to delete). I'm also showing the $devices and $deletes variables as local variables here separately, more or less so you can see how you can store references and then work from those references (which I believe is a better practice than reselecting over and over).
Note also the use of:
jQuery(document).ready(function r($){
I'm using jQuery() in the global scope, which in a larger app you should always do to keep from conflicting with other libraries/frameworks which may use $(). This is also a best practice, and you can use $() within that anonymous function (closure). It's best to get used to doing it this way, IMO.
<table>
<thead>
<tr>
<th>Operator</th>
<th>State</th>
<th>T-Stamp GPS</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr class="device">
<td>Verizon</td>
<td>OK</td>
<td>033830928</td>
<td>
<button type="button" id="d001" class="delete">Delete</button>
</td>
</tr>
...
</tbody>
</table>
NOTE
I made a slight but important change, with reference to the $self, since the AJAX will run the success handler after this is out of scope:
jQuery(document).ready(function r($){
var $devices = $('tr.device'),
$deletes = $devices.find('button.delete');
$deletes.click(function d(){
var $self = $(this).parents('tr.device'),
del = confirm('Delete device?');
if (del) {
// Do $.ajax() request, maybe using the
// clicked button's ID. Or you could put
// the row to delete ID on the TR element.
// And then on success of the AJAX, run:
$self.fadeOut(500, function f(){
$self.remove();
});
}
});
});
http://jsfiddle.net/wMqr8/2
You can add a click event to your JavaScript, and if the user chooses the "ok" button, you can send a request to the view that takes care of removing the record or whatever
Try this:
<button id='rec_delete' onclick="return confirm('Are you sure?')">Delete</button>