I am using DataTables for my project but its sorting function does not work properly. I have tried every single solutions in here but none of them worked for me as well as it does not show the error in the console. I think in my code there is a jQuery conflict. How can I solve this issue? any help?
<table id="dtBasicExample" class="table table-bordered table-hover contact-list" cellspacing="0"
width="100%">
<thead>
<tr>
{# <th scope="col"><input type="checkbox"></th>#}
<th scope="col">Name</th>
<th scope="col">Company Name</th>
<th scope="col">Email</th>
<th scope="col">Phone Number</th>
</tr>
</thead>
{% for contact in contacts %}
<tbody>
<tr data-id="{{ contact.id }}" class="clickable-row"
data-href="{% url 'contact-detail' contact.id %}"
style="cursor: pointer; ">
{# <th scope="row"><input type="checkbox" id="check"></th>#}
<td>{{ contact.client_name }}</td>
<td>{{ contact.client_company_name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.work_phone }}</td>
</tr>
</tbody>
{% endfor %}
</table>
{% csrf_token %}
$('#dtBasicExample').DataTable();
$('.dataTables_length').addClass('bs-select');
as you can see it is a material bootstrap design datatables. In the example shown it works but when i add to my project it does not.
Your html table is "not valid" (It is valid if you want to create multiple table into an parent table). This can make some issue with Datatable. I think sorting is done, but you do not see it, because it sort by tbody tag and there is one line sorted by tbody. The tbody tags are not sorted only the tr inside
Try to remove the tbody into your loop and export it outside the for loop.
<tbody>
{% for contact in contacts %}
// ...
{% endfor %}
</tbody>
Note: cellspacing="0" is an old version of html. You can replace it by the css property border-spacing
Related
I have a shopping cart / order list that I bound to an array which worked fine.
I recently added a row number for each item added to the array, and also a button row.
The problem is I bound them to a current row like so
<div id="table">
<table class="table table-sm table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Product</th>
<th scope="col">Type</th>
<th scope="col">Attribute</th>
<th scope="col">Height</th>
<th scope="col">Width</th>
<th scope="col">Price</th>
<th width="1%" scope="col">Remove</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in table_products">
<td>{{ index +1 }}</td>
<td>{{ item.product }}</td>
<td>{{ item.type }}</td>
<td>{{ item.attribute }}</td>
<td>{{ item.height }}</td>
<td>{{ item.width }}</td>
<td>{{ item.price }}</td>
<td><button class="btn btn-danger" #click="deleteRow(index)">X</button></td>
</tr>
</tbody>
</table>
</div>
</div>
I never had a problem because the bound item values were null so the row was never created. But now Index and the button create the first row of the table.
Is there a way I can clear the array on page load, or am I going at this the wrong way?
edit : added my vue component for context
var table_products = new Vue ({
el : '#table',
data : {
table_products : [{
}]
},
I initialized table_products [{}] instead of []
It had an empty object in the array from initialization so it had an element.
Initializing an empty array instead fixed this issue as it did not have an element.
Thanks to Phil in the comments
In an HTML file, I have the following content:
<template id="notWorking">
<table class="table table-xs table-hover">
<thead>
<tr>
<th>Conteneur</th>
</tr>
</thead>
<tbody>
{{ each(options.dossier.conteneurs) }}
<tr>
<td>{{ #this.numConteneur }}</td>
</tr>
{{ /each }}
</tbody>
</table>
</template>
But when I call console.log(document.getElementById("notWorking").innerHTML), I get the following:
{{ each(options.dossier.conteneurs) }}
{{ /each }}
<table class="table table-xs table-hover">
<thead>
<tr>
<th>Conteneur</th>
</tr>
</thead>
<tbody><tr>
<td>{{ #this.numConteneur }}</td>
</tr></tbody>
</table>
It seems that the element is not being parsed properly...? Am I doing something incorrectly?
See: https://codepen.io/nebrelbug/pen/OJJEvmW
<tbody> can only have <tr> as children. Text content is not allowed.
I have to apply datepicker to my datatable to filter the data between two date range. I have applied my things and tried different codes but nothing worked out. My table contains date in the format( example- July 16,2019). I know it can be done by javascript but I am unable to do so. Please help.
<table id="table table-mutasi" data-toggle="table" data-pagination="true" data-search="true" data-show-columns="true" data-show-pagination-switch="true" data-show-refresh="true" data-key-events="true" data-show-toggle="true" data-resizable="true" data-cookie="true" data-cookie-id-table="saveId" data-show-export="true" data-click-to-select="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id">center</th>
<th data-field="cabin" >cabin</th>
<th data-field="boooked_date">Booked date</th>
<th data-field="release_date">Release Date</th>
<th data-field="client">Client</th>
<th data-field="booked_by">Booked by</th>
{% if not request.user.is_superuser %}
<th>Actions</th>
{% endif %}
</tr>
</thead>
<tbody>
{% for object in object_list %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ object.premises}}</td>
<td>{{ object.cabin }}</td>
<td>{{ object.booked_date }}</td>
<td>{{ object.release_date }}</td>
<td>{{ object.client }}</td>
<td>{{ object.booked_by }}</td>
{% if not request.user.is_superuser %}
<td>
<span class="glyphicon glyphicon-edit"></span>
<input type="hidden" id="cendel" value="{{object.id }}">
</span> </td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
I have table like this which i want to sort by clicking header of table.
I am following this tutorial
http://www.srccodes.com/p/article/27/make-html-table-sortable-jquery-tablesorter-plugin
This is working fine for manually added data to table but for dynamically added by angular it is not working.
<table class="table table-bordered tablesorter" id="myDummyTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>age</th>
<th>Birth Date</th>
<th>Join date</th>
<th>Marks 1</th>
<th>Marks 2</th>
<th>Status</th>
</tr>
</thead>
<tbody class = "smaller">
<tr ng-repeat="show in showdata">
<td>{{ show.name }}</td>
<td>{{ show.age }}</td>
<td>{{ show.birthdate}}</td>
<td>{{ show.joindate}}</td>
<td>{{ show.mark1 }}</td>
<td>{{ show.mark2 }}</td>
</td>
</tr>
</tbody>
</table>
Is there any other way to do this or I am doing it wrong?
This Might help you.
Call $("table").tablesorter(); after appending data to the table DOM.
$(document).ready(function () {
$("#myDummyTable").tablesorter();
});
I have a table where the rows are clickable. when you click on them the row beneth them containing a hidden div is expanded, exposing a nested table of related data. That works the way I had intended.
The problem is that the last column of the table has an edit button. when the edit button is pressed the row is expanded right before it redirects to edit page. This looks very sloppy. is there any way to remove the event from that column only?
Here is my code. This is a Django Template BTW.
HTML
<table id="exp" class="feedtable table table-hover table-bordered ">
<thead>
<tr>
<th>Scales</th><th>Type</th><th>Edit</th>
</tr>
</thead>
<tbody>
{% for scale in scales %}
<tr>
<td><p class="scalet">{{scale}}<p></td><td>{{scale.calc_type}}</td><td><a href="{% url 'questions:edit_feedback' scale.pk %}" class="btn btn-default">Edit</td>
</tr>
<tr>
<td colspan="3">
<div id="{{scale.pk}}div">
<table id="{{scale.pk}}table" class="feedtable table-hover table-bordered">
{% for question in questions %}
{% if question.scale == scale%}
<tr>
<td>{{question | safe}}</td><td><a class='btn btn-default' href="{% url 'questions:edit_question' question.pk %}">Edit</td>
</tr>
{% endif %}
{% endfor %}
</table>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
JQuery
$(function() {
$("td[colspan=3]").find("div").hide();
$("tr").click(function(event) {
console.log("hit")
var $target = $(event.target);
$target.closest("tr").next().find("div").slideToggle();
});
});
you can use event.target object and class,
e.g.)
if a column has "a specific class(or attribute)", you can remove the event
$(document).ready(
function(){
$("tr").click(function(event){
console.log($(event.target).hasClass("except"));
});
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="except">except</td>
<td>data</td>
</tr>
</table>