$(function(){
$("tr").each(function(){
var col_val = $(this).find("td:eq(1)").text();
if (col_val == "open"){
$(this).addClass('table-primary'); //the selected class colors the row green//
} else if (col_val == "in progress"){
$(this).addClass('table-success'); //the selected class colors the row green//
} else {
$(this).addClass('table-secondary');
var col_edit = $(this).find("td:eq(0)");
// console.log("jes");
//console.log(col_edit);
// addClass('h1') is just for testing, if I selected the right cell -> this seems to work!!
$(col_edit).addClass('h1');
// PLEASE HELP HERE: Instead of a big h1 'Edit' in cell 3 i want to see nothing ('')
// these versions I tried:
$(col_edit).text = "";
$(col_edit).innerHTML = "";
$(col_edit).value = "";
$(col_edit).text = '';
$(col_edit).innerHTML = '';
$(col_edit).value = '';
$(col_edit).addClass('hidden');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<!-- UNIMPORTANT HEAD -->
<head th:fragment="header">
<meta charset="UTF-8" />
<title th:text="${title}">DiKuKa</title>
<link rel="shortcut icon" type="image/x-icon" href="images/dikuka.ico">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script th:src="#{/js/custom.js}"></script>
</head>
<!-- THE IMPORTANT TABLE: -->
<div class="table-responsive">
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col"></th>
<th scope="col">status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Edit</td>
<td>open</td>
</tr>
<tr>
<td>Edit</td>
<td>in progress</td>
</tr>
<tr>
<td>Edit</td>
<td>closed</td>
</tr>
</tbody>
</table>
<br>
<hr>
</div>
<br>
https://jsfiddle.net/q5hn6d72/1/
I'm trying to delete the text in a table cell using javascript depending on the value in another cell.
The purpose is that you should not be able to click the link of the text in that cell anymore when the status value is equal to "closed".
Please try the fiddle, at the bottom of the Javascript I marked the different approached that I tried so far. I managed to select the right cell with col_edit, otherwise the cell wouldn't be shown as a h1.
Any tips are welcome!
screenshot of the actual project
Simply you can check 1 more condition for closed as
else if (col_val == "closed"){
$(this).find("td:eq(0)").html('');
When closed then remove text of td
$(function(){
$("tr").each(function(){
var col_val = $(this).find("td:eq(1)").text();
//console.log(col_val);
if (col_val == "open"){
$(this).addClass('table-primary'); //the selected class colors the row green//
} else if (col_val == "in progress"){
$(this).addClass('table-success'); //the selected class colors the row green//
} else if (col_val == "closed"){
$(this).find("td:eq(0)").html('');
} else {
$(this).addClass('table-secondary');
var col_edit = $(this).find("td:eq(0)");
console.log("jes");
// console.log(col_edit);
// addClass('h1') is just for testing, if I selected the right cell -> this seems to work!!
$(col_edit).addClass('h1');
// PLEASE HELP HERE: Instead of a big h1 'Edit' in cell 3 i want to see nothing ('')
// these versions I tried:
$(col_edit).text = "";
$(col_edit).innerHTML = "";
$(col_edit).value = "";
$(col_edit).text = '';
$(col_edit).innerHTML = '';
$(col_edit).value = '';
$(col_edit).addClass('hidden');
}
});
});
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<!-- UNIMPORTANT HEAD -->
<head th:fragment="header">
<meta charset="UTF-8" />
<title th:text="${title}">DiKuKa</title>
<link rel="shortcut icon" type="image/x-icon" href="images/dikuka.ico">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script th:src="#{/js/custom.js}"></script>
</head>
<!-- THE IMPORTANT TABLE: -->
<div class="table-responsive">
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col"></th>
<th scope="col">status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Edit</td>
<td>open</td>
</tr>
<tr>
<td>Edit</td>
<td>in progress</td>
</tr>
<tr>
<td>Edit</td>
<td>closed</td>
</tr>
</tbody>
</table>
<br>
<hr>
</div>
<br>
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'm using 2 javascript plugins : floatThead and Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin
The sticky header is working great until you try to filter the rows. You can only see the div inside the table header when the page is at the top. Once the header is moving, the filter button doesn't display anything
I made an example in JS Fiddle (full code also below - just duplicates the rows to have a certain amount) :
https://jsfiddle.net/9713qa6n/
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://www.jqueryscript.net/css/jquerysctipttop.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://www.jqueryscript.net/demo/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin/excel-bootstrap-table-filter-style.css" />
<link type="text/css" rel="stylesheet" href="" />
<link type="text/css" rel="stylesheet" href="" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin/excel-bootstrap-table-filter-bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.2.4/jquery.floatThead.min.js"></script>
</head>
<body>
<!-- Table to be filtered with a sticky header -->
<table id="table" class="table table-bordered table-intel sticky-header">
<!-- Header that should remain sticky and having filters -->
<thead>
<tr class="table-info">
<th>Animal</th>
<th>Class</th>
<th>Collective Noun</th>
</tr>
</thead>
<!-- Body of the table that should be filtered -->
<tbody>
<tr>
<td>Bear</td>
<td>Mammal</td>
<td>Sleuth</td>
</tr>
<tr>
<td>Ant</td>
<td>Insect</td>
<td>Army</td>
</tr>
<tr>
<td>Salamander</td>
<td>Amphibian</td>
<td>Congress</td>
</tr>
<tr>
<td>Owl</td>
<td>Bird</td>
<td>Parliament</td>
</tr>
........
</tbody>
</table>
<script type="text/javascript">
// Use the plugin once the DOM has been loaded.
$(function () {
// Apply the plugin
$('#table').excelTableFilter();
$('.sticky-header').floatThead({
position: 'absolute'
});
});
</script>
</body>
</html>
I don't know how to get this fixed. Any help would be very welcomed !
Answer from Misha Koryak
This is not this filter's fault, they cannot be expected to handle what other plugins do to the DOM.
Here is an ugly hack that solves your problem:
https://jsfiddle.net/08hf4pdt/
It also voids the warranty on the flaotthead plugin, but I doubt you care :)
$(function () {
// Apply the plugin
$('#table').excelTableFilter();
$('.sticky-header').floatThead({
position: 'absolute'
}).closest('.floatThead-wrapper').find('.floatThead-container').css('overflowX', 'visible');
});
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 created some tabs using jQuery EasyUI tabs. The content of the tab1 loaded by href method(I do not want apply 'iframe' method), it is can be loaded in Firefox well,but can not be loaded in other browsers for example IE or Chrome etc. always in loading... status. the code as follows：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Tabs Test</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="tabsDemo" style="margin-left:20px;width:1100px;height:400px">
<div title="default" class="easyui-layout" style="padding:10px">
<h2>Default tab</h2>
<table id="safett1" class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">id</th>
<th data-options="field:'task'">task</th>
<th data-options="field:'status'">status</th>
<th data-options="field:'question'">question</th>
</tr>
</thead>
</table>
</div>
<div title="tab1" class="easyui-layout" style="padding:10px">
hello world
</div>
<div title="tab2" class="easyui-layout" style="padding:10px">
I have 9 golden fish
</div>
</div>
<script type="text/javascript">
$(function(){
$('#tabsDemo').tabs({
onSelect: function(title, index) {
var tab = $('#tabsDemo').tabs('getSelected');
if(index == '1') {
$('#tabsDemo').tabs('update', {
tab: tab,
type:'all',
options: {
href: './tab1.html', //the new content URL
}
});
} else if(index == '2') {
$('#tabsDemo').tabs('update', {
tab: tab,
options: {
title:'newTab',
href: 'http://www.apple.com/', //the new content URL
}
});
} else {
return;
}
}
});
})
</script>
</body>
</html>
<!-- tab1.html -->
<h2>Good students</h2>
<table id="safett2" class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">id</th>
<th data-options="field:'name'">name</th>
<th data-options="field:'description'">description</th>
<th data-options="field:'score'">score</th>
</tr>
</thead>
</table>
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