I am developing a Flask application, I have an HTML template in which I have two tables, for which I want to use the datatable plugin. Here is the code of my HTML template with the tables
<doctype html>
<html>
<head>
<title> car_name </title>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='aesthetic.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</head>
<body>
<script>
$(document).ready( function () {
$('#table_1').DataTable();
$('#table_2').DataTable();
} );
</script>
<div class="spacebox"></div>
<div class="boxheader">
<a id="Shops">Shops</a>
</div>
<div id="bigbox">
<table id="table_1" border="1" style="background: white">
<thead>
<tr>
<th><b>Phosphosite ID</b></th>
<th><b>Protein</b></th>
<th ><b>Gene</b></th>
<th><b>Residue</b></th>
</tr>
</thead>
<tbody>
{% for x in searchshops %}
<tr>
<td> {{x.NAME}} </td>
<td> {{x.RESOURCES}} </td>
<td> {{x.CARS}} </td>
<td> {{x.BRANDS}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="spacebox"></div>
<div class="boxheader">
<a id="Cars">Cars</a>
</div>
<div class="bigbox">
<table id="table_2" border="1" style="background: white">
<tr>
<th><b>Name</b></th>
<th ><b>Shop</b></th>
</tr>
{% for x in searchcars %}
<tr>
<td> {{x.CAR}}</td>
<td> {{x.Shop}} </td>
</tr>
{% endfor %}
</table>
</div>
</body>
</html>
(searchshops and searchcars are SQLAlchemy queries to a database, in my Flask python script)
The datatable attributes (search bar, sort columns), show on the first table but not the second one.
I have also tried the following script, (having added class="display" after both tables, based on this example https://datatables.net/examples/basic_init/multiple_tables.html )
<script>
$(document).ready(function() {
$('table.display').DataTable();
} );
</script>
But I have the same problem.
How can I apply the datatable plugin to both tables?
Thank you.
I think it's a bug that it only applies to the first table and not on the succeeding table/s regardless if the first table is initialized or not with DataTable. I've tried it, it's the same.
Maybe you can use this concept. The datatables were rendered serverside.
multitable serverside rendering
Related
I am making a jquery data table and extending an admin panel. The issue is thatwhen I use the extend tag to extend the admin panel into the jquery data table page, the jquery table doesnt come
below is only JQuery table
below is the image with the admin panel where the JQuery table doesnt come
below is the html code for the JQuery table using extends tag
{% extends 'polls/base.html' %}
{% block content %}
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8"
src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<table id="table_id">
<thead>
<tr>
<th>ID</th>
<th>Categories</th>
<th>Sub-Categories</th>
<th>Colors</th>
<th>Size</th>
<th>Title</th>
<th>Price</th>
<th>SKU Number</th>
<th>Product Details</th>
<th>Quantity</th>
</tr>
</thead>
{% for result in data %}
<tbody>
<tr>
<td><b>{{result.id}}</b></td>
<td><b>{{result.categories}}</b></td>
<td><b>{{result.sub_categories}}</b></td>
<td><b>{{result.color}}</b></td>
<td><b>{{result.size}}</b></td>
<td><b>{{result.title}}</b></td>
<td><b>{{result.price}}</b></td>
<td><b>{{result.sku_number}}</b></td>
<td><b>{{result.product_details}}</b></td>
<td><b>{{result.quantity}}</b></td>
<td>
<a href="/update/{{result.id}}/">
<button class="btn btn-primary">
Edit
</button>
</a>
</td>
<td>
<a href="/delete/{{result.id}}/" onclick="return confirm('Are You Sure you want to delete?')">
<button class="btn btn-danger">
Delete
</button>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
$(function () {
$("#table_id").dataTable();
});
</script>
{% endblock %}
Help is greatly appreciated thanks!
In my template I have a list containing some items under headings of name and id and i want to add hyperlink to each of them item and when i click an item it takes it's id as argument to the function in views.py of django and run that function.
Currently my templates looks like:
<html>
<head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<td>ID</td>
<td>Name</td>
{% for i in data%}
<tr>
<td>{{i.ID}}</td>
<td>{{i.Name}}</td>
</tr>
{% endfor %}
</table>
</body>
</head></html>
You can simply do a href after your td. In your views you can do the function thing. You need to define a function which takes the id argument.
<html>
<head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<td>ID</td>
<td>Name</td>
{% for i in data%}
<tr>
<td>{{i.ID}}</td>
<td> <a href="/yourpath/{{i.id}}"{{i.Name}}></td>
</tr>
{% endfor %}
</table>
</body>
</head></html>
def your_function_name(request, YOUR_ID):
# code
Also in your urls.py
urlpatterns= [
path('your_path/<your_id>/', views.your_function_name, name='your_name'),
]
I have the below html tags. I will have n number of buttons and respective tables in a page. The page is dynamic, the data may increase, or decrease with respective backend where it feeds the data from. I would like to implement pagination, and showcase only 2 buttons and tables per page. if user wanna see they have to use pagination to see remaining data.
<html>
<body>
<div id="tab">
<div>
<button type="button" class="button">Source_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>111</th>
</tr>
<tr>
<td>111</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">Source_2</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>222</th>
</tr>
<tr>
<td>222</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">Source_3</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>333</th>
</tr>
<tr>
<td>333</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Can somebody help me to achieve the pagination to display only 2 <div>buttons</div> per page.
You can use Jquery data tables, it is very simple and easy to use with PAGINATION, SORT, SEARCH features.
<link rel="stylesheet"href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
$(document).ready(function(){
$('.data_table').DataTable();
});
Like above sample u can create multiple data tables with different class name or Id.
if you are asking how then try this site
http://www.learningjquery.com/2017/03/add-pagination-to-html-table-using-jquery
has some info but if your making a tutorial....well you are not wrong
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've been trying to find an error in my HTML, jquery, or even CSS which is preventing my jQuery from even loading, to no avail. Any help is appreciated
Code
$(document).ready(function() {
'use strict';
$("#IndexContent").hide();
$("#BidListMainMenu").mouseenter(function() {
$(this).slideToggle();
});
$("Table").mouseleave(function() {
$(this).slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<script src="code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jQuery.js"></script>
<title>Main Menu</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div id="IndexBackgroundImage"></div>
<body id="Index">
<div id="IndexLogoDiv">
<img src="images/logo.gif" alt="Logo" />
</div>
<center>
<div id="IndexContent">
<h1>Intranet</h1>
<table>
<tbody>
<tr>
<td class="mainButton">
<img alt="Bid List" src="images/IndexBidList.png" />
</td>
</tr>
<div id="BidListMainMenu">
<td>
<table>
<tbody>
<tr>
<td colspan="1">
<a href="BidList/CurrentBid.php">
<img alt="Bid List alteration" src="images/BidList.png" />
</a>
</td>
</tr>
<tr>
<td colspan="1">
<a href="Bidlist/NewProject.php">
<img alt="Add New Project" src="images/AddNewProject.png" />
</a>
</td>
</tr>
<tr>
<td colspan="1">
<a href="BidList/EditProject.php">
<img alt="Edit Project" src="images/EditProject.png" />
</a>
</td>
</tr>
<tr>
<td colspan="1">
<a href="BidList/Priorities.php">
<img alt="Priorities" src="images/SetPriorities.png" />
</td>
</tr>
<tr>
<td colspan="1">
<a href="BidList/Maintenence.php">
<img alt="Edit Project" src="images/Maintenence.png" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</div>
<tr>
<td>
<img alt="Bid List alteration" src="images/IndexMaintenence.png" />
</td>
</tr>
<tr>
<td>
<a href="">
<img alt="Wordpress Page" src="images/IndexWordpress.png" />
</td>
</tr>
</tbody>
</table>
</div>
<div id="IndexFooterDiv">
<img src="images/address.gif" alt="Address" />
</div>
</center>
</body>
</html>
There is no evidence of the jQuery even starting, which is unusual, because it is linked, and I imported the library. I can post the css if it is helpful. I put the first $("#IndexContent").hide() test case there to check if it loaded. However nothing worked. Any help is appreciated, thank you.
<script src="code.jquery.com/jquery-1.11.3.min.js"></script>
should be:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You have a wrong src attribute for cdn source:
src="code.jquery.com/jquery-1.11.3.min.js"
which should be:
src="//code.jquery.com/jquery-1.11.3.min.js" // will look https || http
and you have a typo for the :
$(Document).ready // you can see the uppercase D in the document
first, I would change the html <script src = >to
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
After, you typed
$(Document).ready(function () {});
Change that Document to document
I have to render a column of a table in jsp. Now, this jsp page is being used in one other page also. That particular column should come up only in other page, not in my page. So for this i am using one context variable, which i am getting somehow and saving it in my javascript value.
how to do this ?
<html>
<head>
<script>
function getPageId(){
var someValue = fetching it some how using url.
var pageId=someValue;
}
</script>
<script language="JavaScript">getPageId();</script>
</head>
<body>
<table id="pageContent" width="100%" valign="top">
<tr>
<td id="firstColumn">
<div class="className">
<jsp:include page="/pages/common/blank.jsp" />
</div>
</td>
<td id="secondColumn" width="100%" style="padding-left:16px">
</td>
</tr>
</table>
</body>
</html>
Column td with id="firstCoulmn" has to get conditionally rendered based on value of pageId variable
Please help
If var someValue can be determined by the url parameter, then you have to do the logic in the server side itself.
<body>
<table id="pageContent" width="100%" valign="top">
<tr>
<%
String someValue = request.getParameter("someValue");
// Your logic goes here
if("test".equals(someValue)) { %>
<td id="firstColumn">
<div class="className">
<jsp:include page="/pages/common/blank.jsp" />
</div>
</td>
<% } %>
<td id="secondColumn" width="100%" style="padding-left:16px">
</td>
</tr>
</table>
</body>