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.
Related
How to make datatable rows draggable and maintain the sequence of the column number? I am trying to create a questionnaire which theme is Arrangement Choices, i am appending the choices by using addRow. I want to add drag events onto rows and maintain the sequence.. but i don't know how to do it..
Here's my code:
$(document).ready(function () {
var table = $('#ADDchoicesARTableListSequence').DataTable();
const btnAdd = document.querySelector("#addSequenceBtn");
const inputChoices = document.querySelector("#sequenceChoices");
var count = 1;
btnAdd.addEventListener("click", function () {
table.row.add([count,inputChoices.value.trim(),'DELETE']).draw();
count += 1;
inputChoices.value = '';
})
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.js"></script>
<div class="__Sequence">
<label>Arrangement Choices</label>
<input type="text" class="__choicesAddARSeq" id="sequenceChoices"/>
<button id="addSequenceBtn">ADD</button>
</div>
<table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence">
<thead>
<tr>
<th>No.</th>
<th>Choices</th>
<th>Action</th>
</tr>
</thead>
</table>
<button id="addSequenceBtn">Create Question</button>
DataTables has various extensions you can use for advanced features - and one of those is the Row Reorder extension - so we can use that.
I am not sure what you mean by "maintain the sequence of the column number", so here are two slightly different approaches. Maybe one of them is what you want.
Approach 1 - the first column always shows 1 followed by 2 and so on, regardless of how you re-arrange your rows:
$(document).ready(function() {
var table = $('#ADDchoicesARTableListSequence').DataTable({
rowReorder: {
selector: 'tr'
}
});
const tbody = document.getElementById("choicesListTbodyADD");
const btnAdd = document.querySelector("button");
const inputChoices = document.querySelector("input");
var count = 1;
btnAdd.addEventListener("click", function() {
table.row.add([count, inputChoices.value.trim(), 'DELETE']).draw();
count += 1;
inputChoices.value = '';
})
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.3.1/css/rowReorder.dataTables.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.3.1/js/dataTables.rowReorder.js"></script>
</head>
<body>
<div style="margin: 20px;">
<input type="text" id="choices" />
<button id="appendChoices">Add Choices</button>
<br><br>
<table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence">
<thead>
<tr>
<th>No.</th>
<th>Choices</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
In the above demo, I added two new libraries for the JavaScript and CSS needed for dragging.
I also added rowReorder: { selector: 'tr' } to the DataTable which tells the plug-in that we can drag the row by selecting any part of the row (the default behavior is to drag only by selecting the first column).
Approach 2 - all the data in the row moves together.
In this approach, the values in the first column move along with the row they belong to:
$(document).ready(function() {
var table = $('#ADDchoicesARTableListSequence').DataTable({
rowReorder: {
selector: 'tr'
},
columnDefs: [{
targets: 0,
visible: false
}]
});
const tbody = document.getElementById("choicesListTbodyADD");
const btnAdd = document.querySelector("button");
const inputChoices = document.querySelector("input");
var count = 1;
btnAdd.addEventListener("click", function() {
table.row.add([count, count, inputChoices.value.trim(), 'DELETE']).draw();
count += 1;
inputChoices.value = '';
})
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.3.1/css/rowReorder.dataTables.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.3.1/js/dataTables.rowReorder.js"></script>
</head>
<body>
<div style="margin: 20px;">
<input type="text" id="choices" />
<button id="appendChoices">Add Choices</button>
<br><br>
<table class="table text-center table-bordered table-striped dataTable dtr-inline" id="ADDchoicesARTableListSequence">
<thead>
<tr>
<th>Idx.</th>
<th>No.</th>
<th>Choices</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
In this approach, I added an extra column to your table and I hid the first column.
You can try each approach and see the differences for yourself.
I don't know, I can't read some JSON file ou put a table which read JSON data (internal or external source)
Does someone have an idea?
Here are my link and script I used
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
Here is my script where I create the table, I use data-URL to load the data from a local JSON file
<table id="table" data-toggle="table" data-height="460" data-search="true" data-url="data.json">
<thead>
<tr>
<th data-field="id">#</th>
<th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th>
<th data-field="type" data-formatter="nameFormatter">Type</th>
<th data-field="artist" data-formatter="nameFormatter">Artiste</th>
<th data-field="sheet" data-formatter="nameFormatter">Fiche</th>
</tr>
</thead>
</table>
<script>
$table.bootstrapTable('refresh',{data: data})
})
function nameFormatter(value) {
return 'Formatted ' + value
}
var $table = $('#table')
$(function() {
var data = [
{"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">"}
]
$table.bootstrapTable({data: data})
})
</script>
I really don't know why it doesn't work...
thanks in advance
If you want to load a local json file, try like below.
function nameFormatter(value) {
return 'Formatted ' + value
}
var data = [
{"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">"}
]
$("#table").bootstrapTable({data: data})
And remove data attribute data-url="data.json" from the table.
You can run the snippet below to see the results.
function nameFormatter(value) {
return 'Formatted ' + value
}
var data = [
{"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">"}
]
$("#table").bootstrapTable({data: data})
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
<table id="table" data-toggle="table" data-height="460" data-search="true">
<thead>
<tr>
<th data-field="id">#</th>
<th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th>
<th data-field="type" data-formatter="nameFormatter">Type</th>
<th data-field="artist" data-formatter="nameFormatter">Artiste</th>
<th data-field="sheet" data-formatter="nameFormatter">Fiche</th>
</tr>
</thead>
</table>
If you want to load from an external source, your function should contain only the formatter function.
Try the snippet below to see the results.
function nameFormatter(value) {
return 'Formatted ' + value
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
<table id="table" data-toggle="table" data-height="460" data-search="true" data-url="https://api.myjson.com/bins/q9n5g">
<thead>
<tr>
<th data-field="id">#</th>
<th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th>
<th data-field="type" data-formatter="nameFormatter">Type</th>
<th data-field="artist" data-formatter="nameFormatter">Artiste</th>
<th data-field="sheet" data-formatter="nameFormatter">Fiche</th>
</tr>
</thead>
</table>
Remove the data-toggle attribute if you are not loading data from external json file.
It seems any calls to $('#table').bootstrapTable() are completely ignored when data-toggle is enabled and data is not rendered.
I am using Angularjs as the frontend and spring mvc as the backened for my application. I am using datatables for displaying records. The problem I am facing is datatables works sometimes and sometimes doesn't.
After performing edit or delete or any dynamic operations the datatable loses its shape like pagination, filtration, search. Even though there will be data but it shows there are no records but still it displays records with no pagination.
I tried draw() and reload methods in the script but nothing seemed to work.
In html pages my order of loading css and js files are like this
<html lang="en" data-ng-app="adminApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/css/bootstrap.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/css/Custom-Style.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/font-awesome-4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/font-awesome-4.0.3/css/font-awesome.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" media="screen" ref="resources/front/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="resources/angular/angulars-datetime-picker.css" />
<link rel="stylesheet" href="resources/front/css/spinner.css">
<script src="resources/front/js/jquery-1.12.4.js" type="text/javascript"></script>
<script src="resources/front/js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" src="resources/front/js/Custom-js.js"></script>
<script src="resources/front/js/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript" src="resources/front/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="resources/front/js/dataTables.responsive.min.js"></script>
</head>
</html>
This is the script where I tried everything. I have placed this inside the head tag. I have placed all the above code in every html file.
<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>
Here is how i am using ng-repeat for displaying data in table
<div class="TableBox">
<table id="example" class="display responsive nowrap"
cellspacing="0" width="100%" >
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example"
rowspan="1" colspan="1" aria-sort="ascending" aria-label="" >
SlNo
</th>
<th class="sorting_asc" tabindex="0" aria-controls="example"
rowspan="1" colspan="1" aria-sort="ascending"
aria-label="">Name</th>
</tr>
</thead>
<tbody>
<tr role="row" class="even" data-ng-repeat="student in students">
<td>{{$index + 1}}</td>
<td>{{student.studentName}}
</td>
</tr>
</tbody>
</table>
</div>
Here is my AngularController.js
$scope.getAllStudents = function()
{
AdminStudentService.getAllStudents().then(function(response)
{
$scope.students=response.data;
});
}
Here is my update method
$scope.updateStudent = function(student)
{
$scope.editstudentForm.$submitted= true;
if($scope.editstudentForm.$valid)
{
AdminStudentService.updateStudent(student).then(function(response)
{
if(response.data=="success")
{
$scope.editstudentForm.$submitted= false;
$window.scrollTo(0,0);
$scope.student = {};
$scope.getAllStudents();
$scope.successmessage1="Student Details Updated!;
$timeout(function()
{
$scope.closeeditStudent();
$scope.successmessage1="";
}, 1500);
}
});
}
}
Am I missing something in the script or do I need to add something?
I'm providing you with .js function that will help you understand datatables.
$scope.getAllReports = function() {
$http({
method : 'GET',
url : '/getReport'
}).success(function(data, status, headers, config) {
$scope.test = data;
$('#stack').DataTable().clear().draw();
angular.forEach($scope.test, function(test) {
$('#mantisi').DataTable().row.add([
test.t0,
test.t1,
test.t2,
test.t3,
test.t4,
test.t5
]).draw();
});
});
};
Also here is code from .html:
<table id="stack" class="table table-bordered table-striped" ng-init="getAllReports()">
<thead>
<tr>
<th>t0</th>
<th>t1</th>
<th>t2</th>
<th>t3</th>
<th>t4</th>
<th>t5</th>
</tr>
</thead>
<tbody></tbody>
</table>
And also a .js for DT:
$('#stack').DataTable({
"order": [[ 0, "asc" ]],
"language": {
url: '/datatables/datatables.hr.json'
},
"drawCallback": function( settings ) {
$(".btn-excel-custom").removeClass("dt-button buttons-excel buttons-html5");
$(".btn-default-custom").removeClass("dt-button").addClass("btn btn-default");
},
"bPaginate": false,
dom: 'Bfrt',
buttons: [{
text:"Export to Excel",
extend: 'excel',
className: 'btn btn-excel-custom'
}]
});
These are 3 main snippets for decent show-up of jQuery datatables. Also, I've created special methods provided by DT API in last snippet.
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 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