Between <head> tags:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.1/css/fixedColumns.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.1/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
Script:
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: {
leftColumns: 2
}
} );
} );
</script>
Table (it has more than 2 rows):
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>..</th>
<th>..</th>
<th>..</th>
<th>..</th>
<th>..</th>
<th>..</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
CSS:
/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}
Table is working but table has no fixed columns. FixedColumns part is not working.
The issue is the libraries are not in right order. Your scripts etc should be like this:
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.1/js/dataTables.fixedColumns.min.js"></script>
So basically you just need to make sure to load the main datatables js file before fixedcolumns :)
Related
I'm trying to edit a row in datatables, clicking on that.
I'm following the documentation: https://datatables.net/reference/api/row().edit(),
but it's not working for me.
I got this error:
"Uncaught TypeError: this_row.edit is not a function"
my code:
(function(){
product_table = $('#product_table').DataTable({
fixedHeader: {
header: true,
footer: true
},
bLengthChange: false
});
row=[
'<div style="white-space: nowrap;">'+
'<button type="button" class="btn edit btn-sm btn-light m-1">Edit</button>'+
'</div>',
'test',
1,
'tes',
2.12,
2.12
]
product_table.row.add(row).draw( false )
$('#product_table tbody').on('click', 'button', function () {
row[2] += 1;
let this_row = product_table.row($(this).parents('tr'));
this_row.edit(row); // <- that point!!!
});
})();
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!--bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- datatable-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<table id="product_table" class="table table-fit">
<thead>
<tr>
<th></th>
<th>name</th>
<th>amount</th>
<th>unit</th>
<th>price unit</th>
<th>total price</th>
</tr>
</thead>
<tbody></tbody>
</table>
*this code is just an example of what I want, I'm not exactly going to increment a number.
In my real code I create a modal with these fields as input and recreate the 'row' variable, but the edit function is basically the same
I finally found a solution.
You can easily edit the row data in this way, without the need for an API:
this_row.data(row).draw();
Documentation:
https://datatables.net/reference/api/row().data()
I have the following code and after pressing a button that invokes the $("#proxy_history_dialog").dialog({ line - I keep getting the error Uncaught TypeError: $(...).dialog is not a function.
I searched for a solution and most answers are pointing to jquery includes block. I tried to change jquery versions multiple times without any luck.
What am I missing out here?
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>
Optimize Proxies
| Upstream Commerce</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/tables_style.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.css"/>
<script type="text/javascript"
src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.js"></script>
<script type="text/javascript" src="/static/script/api_recs.js"></script>
<style type="text/css">
tfoot {
display: table-header-group;
}
</style>
</head>
<body>
<img id="loader" src="/static/img/loader_animation_large.gif"
style="
width:36px;
height:36px;
display: none;
position:absolute;
top:50%;
left:50%;
margin-top:-18px;
margin-left:-18px;"/>
<p>Logout | Home</p>
<div id="title">
<b style="font-size:200%" ;>Optimize proxies<br></b>
</div>
<div id="proxy_history_dialog" title="Proxy history" style="display:none;">
</div>
<table id='p_table-id' class="display" cellspacing="0" width="50%">
<thead>
<tr>
<th>Site name</th>
<th>Site id</th>
<th>Extraction rate</th>
<th>Proxy</th>
<th>Proxy duration</th>
<th>Proxy history</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Site name</th>
<th>Site id</th>
<th>Extraction rate</th>
<th>Proxy</th>
<th>Proxy duration</th>
<th>Proxy history</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><span>hp</span></td>
<td><span>2198</span></td>
<td><span>95.2%</span></td>
<td><span>brazil</span></td>
<td><span>0 days</span></td>
<td>
<button id="2198" class="get-proxy-history">history</button>
</td>
</tr>
<tr>
<td><span>amazon_hp</span></td>
<td><span>2199</span></td>
<td><span>99.8%</span></td>
<td><span>all_std.proxymesh</span></td>
<td><span>422 days</span></td>
<td>
<button id="2199" class="get-proxy-history">history</button>
</td>
</tr>
<tr>
<td><span>bestonix</span></td>
<td><span>-104</span></td>
<td><span>93.3%</span></td>
<td><span>shader_us</span></td>
<td><span>225 days</span></td>
<td>
<button id="-104" class="get-proxy-history">history</button>
</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$(".get-proxy-history").click(function () {
var uri = "manage/optimize_proxies/get_proxy_history/" + $(this).attr("id") + "/";
var result = api_get(uri, false, 'POST');
$("#proxy_history_dialog").html(result[0]);
$("#proxy_history_dialog").dialog({
resizable: true,
width: "auto",
height: "auto",
autoResize: false,
modal: false,
draggable: true
});
});
///////////////////////////////////////////////////////////////////
// Setup column search - add a text input to each footer cell
$('#p_table-id tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable
var table = $('#p_table-id').DataTable({
dom: 'l Brtip',
"aLengthMenu": [
[20, 50, 100, -1],
[20, 50, 100, "All"]],
"buttons": [],
paging: false,
fixedHeader: true
});
// Apply the search
table.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
</script>
</body>
</html>
put line
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
after
<script type="text/javascript" src="/static/script/api_recs.js"></script>
like:
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/tables_style.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.js"></script>
<script type="text/javascript" src="/static/script/api_recs.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
note:
if this way does not work then chech api_recs.js
It seems, the error is happening with your DataTables inclusion/version. I have tried with jQuery version 1.8.0 and DataTables version 1.10.1 and everything seems to be working fine for me.
Working Fiddle: https://jsfiddle.net/mnexvzgx/
Note: I have commented out your API call and replaced the result with a dummy value.
Hope this helps!
I am trying to use this table to display table that contains data that are loaded from a .csv file.
Is there a way to load data from .csv into this table with the capability of applying conditional formatting ?
Thanks!
The following code is as far as iv could up to now, the table body <tbody> is separated from the table.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="1000">
<!-- REFRESH EVERY 2 minutes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://papaparse.com/resources/js/papaparse.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
<style type="text/css">
</style>
<title>HTML TABLE FROM .CSV DATA SOURCE</title>
</head>
<body>
<script>
//Setting data.csv as data source to be loaded into table id="example"
$(function() {
Papa.parse("data.csv", {
download: true,
complete: function(example) {
console.log("Remote file parsed!", example.data);
$.each(example.data, function(i, el) {
var row = $("<tr/>");
row.append($("<td/>").text(i));
$.each(el, function(j, cell) {
if (cell !== "")
row.append($("<td/>").text(cell));
});
$("#example tbody").append(row);
});
}
});
});
</script>
<script type='text/javascript'>
//Conditionally formating. Where North office are red and South office are green
//<![CDATA[
$(window).load(function() {
$('#example').dataTable({
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
switch (aData[0]) {
case 'North':
$(nRow).css('color', 'red')
break;
case 'South':
$(nRow).css('color', 'green')
break;
}
}
});
}); //]]>
</script>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
You have to somehow transform your .csv into an array of arrays [[]](each element representing an array of columns), like in the example given in the tutorial on the page shown.
The data key of the configuration object, you pass to datatables as to have the value of this structure.
An example to bruteforce converting would be in this fiddle:
var csv="1,2,3\n4,5,6"
function csvToArray(csv){
return csv.split('\n').map(function(x){
return x.split(',');
})
};
console.log(csvToArray(csv));
For proper parsing rely on a parsing library.
I used angular datatables with fixed column, my HTML code for view as the following:
<div class="row" ng-controller="PerformanceCtrl">
<table id="example" datatable=""
class="stripe row-border order-column"
dt-options="dtOptions">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
</tr>
</tbody>
</table>
And my controller code as the following:
'use strict';
app.controller('PerformanceCtrl', ['$scope', 'DTOptionsBuilder', 'DTColumnDefBuilder', function ($scope, DTOptionsBuilder, DTColumnDefBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('scrollY', '300px')
.withOption('scrollX', '100%')
.withOption('scrollCollapse', true)
.withOption('paging', false)
.withFixedColumns({
leftColumns: 1
});
}]);
And for my index.html file, I included datatables libraries as the following order:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="modules/performance/controller.js"></script>
<link rel="stylesheet" href="bower_components/angular-datatables/dist/plugins/bootstrap/datatables.bootstrap.css">
<script src="bower_components/DataTables/media/js/jquery.dataTables.js"></script>
<script src="bower_components/angular-datatables/dist/angular-datatables.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/fixedheader/angular-datatables.fixedheader.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/fixedcolumns/angular-datatables.fixedcolumns.min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/DataTables/media/css/jquery.dataTables.min.css">
And This my module:
var app = angular.module('MyApp', ['datatables', 'datatables.fixedcolumns']);
But I got this error undefined is not a function as this image:
If I removed the following code from options of table, No error but no fixedColumns:
.withFixedColumns({
leftColumns: 1
});
I need to make my first column fixed, How can I fix this error ?
I post this question on github, and l-lin answer on it.
I missed including the following:
<script src="vendor/FixedColumns-3.0.4/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/FixedColumns-3.0.4/css/dataTables.fixedColumns.min.css">
I should download the FixColumns jQuery.
You just forgot to add the ng attribute to the datatables.
Below is working Screen shot ...
Click here for Live Demo
The first issue I’m having is that I tried to format my code to be clean and easy to read but when I did and went through the sides in my browser it didn’t format and made it misaligned so I worked with it to make it look aligned by then in the actual HTML file it looks unprofessional and hard to read. Why is this happening?
The second issue I’m having is with the actual data tables plugin itself is that when I have the HTML table to display the table rendered with the plugin it cuts a lot off and I tried applying a class to the table and modifying the height and width of the table but its not adjusting per my css rules.
And the last issue I’m having is that with my table HTML of the table to explain how it should be written it applies an ID to the table that shouldn’t be done until after rendering. Not sure why this is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Introduction of Datatables</title>
<meta name="author" content="">
<meta name="description" content="Creating a project to introduce the use of the Datatables jQuery plugin.">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/league.css" id="theme">
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<style>
#table-container {
width: 200px;
}
</style>
</head>
<body>
<div class="reveal container-fluid">
<div class="slides">
<section>
<h1>Datatables</h1>
<p>jQuery Plugin for HTML tables</p>
<p>By: Me</p>
</section>
<section>
<h2>Uses For Datatables</h2>
<ul>
<li>Assists with paginating many rows of tabular data.</li>
<li>Can manipulate columns and rows via modifications with passed parameters</li>
<li>Can work with backend data via a API in the form of JSON</li>
<li>Can sort and search through data for results</li>
<li><strong>THEMEABLE</strong></li>
</ul>
</section>
<section>
<pre><code data-trim>
<table class="datatable table table-bordered">
<thead>
<th>ID</th>
<th>Username</th>
<th>Email Address</th>
<th>Role</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>smorrow</td>
<td>smorrow#example.com</td>
<td>Owner</td>
</tr>
<tr>
<td>2</td>
<td>jstevens</td>
<td>jstevens#example.com</td>
<td>Editor</td>
</tr>
<tr>
<td>3</td>
<td>ksmith</td>
<td>ksmith#example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>wjones</td>
<td>wjones#example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>jcoonts</td>
<td>jcoonts#example.com</td>
<td>Administrator</td>
</tr>
<tr>
<td>5</td>
<td>rsimmons</td>
<td>rsimmons#example.com</td>
<td>Administrator</td>
</tr>
</tbody>
</table>
</code></pre>
</section>
<section>
<h2>Javascript Code</h2>
<pre><code data-trim>
<script>
var dataTable = $('.datatable').dataTable();
</script>
</code></pre>
</section>
<section>
<div id="table-container">
<table class="datatable table table-bordered">
<thead>
<th>ID</th>
<th>Username</th>
<th>Email Address</th>
<th>Role</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>smorrow</td>
<td>smorrow#example.com</td>
<td>Owner</td>
</tr>
<tr>
<td>2</td>
<td>jstevens</td>
<td>jstevens#example.com</td>
<td>Editor</td>
</tr>
<tr>
<td>3</td>
<td>ksmith</td>
<td>ksmith#example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>wjones</td>
<td>wjones#example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>jcoonts</td>
<td>jcoonts#example.com</td>
<td>Administrator</td>
</tr>
<tr>
<td>5</td>
<td>rsimmons</td>
<td>rsimmons#example.com</td>
<td>Administrator</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
viewDistance: 1,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{
src: 'lib/js/classList.js', condition: function () {
return !document.body.classList;
}
},
{
src: 'plugin/markdown/marked.js', condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/markdown/markdown.js', condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/highlight/highlight.js', async: true, condition: function () {
return !!document.querySelector('pre code');
}, callback: function () {
hljs.initHighlightingOnLoad();
}
},
{src: 'plugin/notes/notes.js', async: true}
]
});
</script>
<script>
var datatTable = $('.datatable').dataTable();
</script>
</body>
</html>
Here's a screenshot of what I'm looking at.
https://www.dropbox.com/s/p8luug2gsytnwno/Screenshot%202015-01-27%2012.50.43.png?dl=0