I am trying to develop the following functionality,
https://datatables.net/extensions/responsive/examples/display-types/modal.html
I followed the exact same steps but, I am not getting the icons to launch the modal dialog,
Here is the complete code,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Responsive</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script>
$(document).ready(function () {
var dataset = {
"data": [
{
"first_name": "Airi",
"last_name": "Satou",
"position": "Accountant",
"office": "Tokyo",
"start_date": "28th Nov 08",
"salary": "$162,700"
},
{
"first_name": "Angelica",
"last_name": "Ramos",
"position": "Chief Executive Officer (CEO)",
"office": "London",
"start_date": "9th Oct 09",
"salary": "$1,200,000"
},
{
"first_name": "Ashton",
"last_name": "Cox",
"position": "Junior Technical Author",
"office": "San Francisco",
"start_date": "12th Jan 09",
"salary": "$86,000"
},
{
"first_name": "Bradley",
"last_name": "Greer",
"position": "Software Engineer",
"office": "London",
"start_date": "13th Oct 12",
"salary": "$132,000"
},
{
"first_name": "Brenden",
"last_name": "Wagner",
"position": "Software Engineer",
"office": "San Francisco",
"start_date": "7th Jun 11",
"salary": "$206,850"
},
{
"first_name": "Brielle",
"last_name": "Williamson",
"position": "Integration Specialist",
"office": "New York",
"start_date": "2nd Dec 12",
"salary": "$372,000"
},
{
"first_name": "Bruno",
"last_name": "Nash",
"position": "Software Engineer",
"office": "London",
"start_date": "3rd May 11",
"salary": "$163,500"
},
{
"first_name": "Caesar",
"last_name": "Vance",
"position": "Pre-Sales Support",
"office": "New York",
"start_date": "12th Dec 11",
"salary": "$106,450"
},
{
"first_name": "Cara",
"last_name": "Stevens",
"position": "Sales Assistant",
"office": "New York",
"start_date": "6th Dec 11",
"salary": "$145,600"
},
{
"first_name": "Cedric",
"last_name": "Kelly",
"position": "Senior Javascript Developer",
"office": "Edinburgh",
"start_date": "29th Mar 12",
"salary": "$433,060"
}
]
}
$.each(dataset.data, function (i, item) {
item.age = Math.floor((Math.random() * 70) + 1);
item.extn = Math.floor((Math.random() * 1000) + 1);
})
$('#example').DataTable({
"paging": false,
"info": false,
"filter": false,
"paging": false,
retrieve: true,
"processing": true,
data: dataset.data,
columns: [{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" },
{ "data": "extn" }],
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function (row) {
var data = row.data();
alert(row.data.length)
return 'Details for ' + data[0] + ' ' + data[1];
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'table'
})
}
}
});
});
</script>
</head>
<body>
<table width="100%" class="table table-striped table-bordered nowrap" id="example" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
Output:
You can even copy and paste the entire code in an HTML file and run it to see the behavior.
I am not seeing any errors in the console. I tested with IE 11 and Chrome.
Any suggestions / directions are greatly appreciated.
Edit:
Snapshot from jsbin.com/hehewiz/edit?html,output. (link created by bazzells)
The icons are hidden on a wide screen due to the collapsed class being removed from the table. The collapsed class is toggling based on the window width currently.
Your code is working just fine, when the screen gets smaller and at least one columns becomes hidden, the (+) icon appears.
This is because this option is for responsive display of information.
Related
I was working on a web application with JQuery datatables in it, and I have ran into some issues.
I am using the detailsTable.on('click', 'button.edit', function () { ... }) function to catch clicking events on buttons with a class "edit". It is working just fine, and I figured out, that i can get the row data with using detailsTable.row($(this).parents('tr')).data();. But it contains only the data I recived in the ajax call.
My idea is to change the html of the button I clicked on, but I can't find any solution, how to modify it. (I'd like to modify only in this row.)
Any ideas?
My html:
<table id="datatable" class="table table-bordered table-striped table-hover table-sm table-head-fixed">
<thead>
<tr>
<th>Value 1</th>
<th>Value 2</th>
<th>Actions</th>
</tr>
</thead>
</table>
My javascript:
$(function () {
var mytable = $("#datatable").DataTable({
"ajax": {"url": "", dataSrc: "data"},
"columns": [
{ "data": "val_2" },
{ "data": "val_1" }
],
"columnDefs": [
{
"targets": 2,
"render": function ( data, type, full, meta ) {
return '<button type="button" class="edit btn btn-info btn-sm" data-subid="'+full['id']+'"><i class="fa fa-wrench"> Edit</i></button>';
},
},
}
});
$('#datatable tbody').off('click')on('click', 'button.edit', function () { // Delete token
var data = mytable.row($(this).parents('tr')).data();
// I'd like to change the button, (I need to change the title, the fa-icon and the class, so basicely the whole html) like the way i did with "columnDefs"
});
});
Instead of accessing the source data values using data(), you can access the node using node(). Also, because you want to change the clicked button, you can get the <td> node for the cell in which the button is placed, instead of getting the row:
var td = mytable.cell($(this).parents('td')).node();
This can then be manipulated using jQuery or JavaScript - for example:
$( td ).find( 'button' ).html('I was ckicked');
Demo:
var dataSet = [
{
"id": "123",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "456",
"name": "Donna Snider",
"position": "Customer Support",
"salary": "$112,000",
"start_date": "2011/01/25",
"office": "New York",
"extn": "4226"
},
{
"id": "567",
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012/03/29",
"office": "Edinburgh",
"extn": "6224"
},
{
"id": "432",
"name": "Airi Satou",
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008/11/28",
"office": "Tokyo",
"extn": "5407"
},
{
"id": "987",
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": "2012/12/02",
"office": "New York",
"extn": "4804"
}
];
$(document).ready(function() {
var mytable = $('#datatable').DataTable( {
lengthMenu: [ [2, -1] , [2, "All"] ],
data: dataSet,
columns: [
{ title: "ID", data: "id" },
{ title: "Name", data: "name" },
{ title: "Office", data: "office" },
{ title: "Position", data: "position" },
{ title: "Start date", data: "start_date" },
{ title: "Extn.", data: "extn" },
{ title: "Salary", data: "salary" }
],
"columnDefs": [
{
"targets": 2,
"render": function ( data, type, full, meta ) {
return '<button type="button" class="edit btn btn-info btn-sm" data-subid="'+full['id']+'"><i class="fa fa-wrench"> Edit</i></button>';
},
},
]
} );
$('#datatable tbody').off('click').on('click', 'button.edit', function () { // Delete token
var td = mytable.cell($(this).parents('td')).node();
$( td ).find( 'button' ).html('I was ckicked');
});
} );
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="datatable" class="display dataTable cell-border" style="width:100%">
</table>
</div>
</body>
</html>
Data is not populated in data table with array objects, getting blank screen. Tried with below code, any issue pls suggest
$('#example3').DataTable( {
data:storedJsonData,
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "position" },
{ "data": "salary" },
{ "data": "start_date" },
{ "data": "office" },
{ "data": "extn" }
]
} );
Fiddle
Data is not populated because columns header is case sensitive and must equal to given data.
I fix your data and columns header. Now it's work and show your data on DataTable.
var storedJsonData = [{
"id": "1",
"name": "abc",
"position": "Accountant",
"office": "Tokyo",
"Age": "63",
"start_date": "2011/07/25",
"salary": "$170,750",
"extn": "2"
},
{
"id": "2",
"name": "def",
"position": "Accountant",
"office": "Tokyo",
"Age": "63",
"start_date": "2011/07/25",
"salary": "$170,750",
"extn": "2"
}
];
$('#example3').DataTable({
data: storedJsonData,
"columns": [{
"data": "id"
},
{
"data": "name"
},
{
"data": "position"
},
{
"data": "salary"
},
{
"data": "start_date"
},
{
"data": "office"
},
{
"data": "extn"
}
]
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<table id="example3" class="display" style="width:100%">
</table>
I have an array of objects below.
var arrayObjects= [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}
]
The array is dynamically updated, through some API calls that my app makes.
I instantiate a datatable as shown.The array at this point, the arrayObjects is empty.
HTML
<table id="myTable" class="table table-striped table-dark">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
</tr>
</thead>
</table>
JAVASCRIPT
var myDataTable=$('#myTable').DataTable( {
data: arrayObjects,
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'office' }
]
} );
I add new objects in the array as follows:
EDIT: somedata can be as follows:
var somedata = {
"name": "James",
"position": "CEO",
"salary": "$13,140",
"start_date": "2017/04/25",
"office": "London",
"extn": "54211"
}
arrayObjects.push(somedata);
How do I add data to the table/update the table after that?
I have tried:
myDataTable.clear().row.add(arrayObjects).draw();
but it doesn't seem to work. The Table is still empty.
The problem is in using row API instead of rows API because you are storing as an array of objects.
Change it to
myDataTable.clear().rows.add(arrayObjects).draw();
Working jsfiddle.
To work with row API you have to change the arrayObjects either as a simple array or single object like below
var arrayObjects = ['James', 'CEO', '$13000', 'London'];
// or
var arrayObjects = {
"name": "James",
"position": "CEO",
"salary": "$13,140",
"office": "London"
};
// it will work now
myDataTable.clear().row.add(arrayObjects).draw();
I am interested in creating a function that creates DataTables dynamically with the Data parameter passed in the function.
Below is what I wrote so far, the DataTables can add rows dynamically, but not the column header - can use some help here (I've read the DT API, but didn't find much help there).
var table2 = $('#example2').DataTable({
"paging" : true,
"ordering" : true,
});
// header row
table2.columns().header(data["header"]).draw();
// create rows
for (var prop in data["staff"]) {
table2.row.add([
data["staff"][prop].name,
data["staff"][prop].position,
data["staff"][prop].office,
data["staff"][prop].age,
data["staff"][prop].Start_date,
data["staff"][prop].salary
]).draw();
}
The Data passed into the function:
var data = {
"header": [
"Name",
"Position",
"Office",
"Age",
"Start_date",
"Salary"
],
"staff": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Edinburgh",
"age": 61,
"Start_date": "2011/04/25",
"salary": "$320,800"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"office": "Tokyo",
"age": 63,
"Start_date": "2011/07/25",
"salary": "$170,750"
},
{
"name": "Ashton Cox",
"position": "Junior Technical Author",
"office": "San Francisco",
"age": 66,
"Start_date": "2009/01/12",
"salary": "$86,000"
}
]
};
I'm new to Angular JS here.
can any one please help me how to parse and display the Json Data in different tables using Angular JS
[
{
"id": 0,
"isActive": false,
"balance": 1025.00,
"picture": "http://www.placekitten.com/50/50",
"age": 25,
"name": "Daisy Mcneil",
"gender": "female",
"company": "Verbus",
"email": "daisymcneil#verbus.com",
"phone": "+1 (936) 586-3983",
"address": "849 Newkirk Placez, Laurelton, Nevada, 1086",
"registered": "2012-07-15T13:46:25 +07:00",
"friends": [
{
"id": 0,
"name": "Debra Blair"
},
{
"id": 1,
"name": "Henry Avila"
},
{
"id": 2,
"name": "Jody Stark"
}
],
"service": "cherry"
},
{
"id": 1,
"isActive": true,
"balance": -2884.00,
"picture": "http://www.placekitten.com/50/50",
"age": 23,
"name": "Schroeder Atkinson",
"gender": "male",
"company": "Twiggery",
"email": "schroederatkinson#twiggery.com",
"phone": "+1 (861) 449-2254",
"address": "259 Highland Avenue, Riner, Vermont, 905",
"registered": "1998-01-17T08:16:34 +08:00",
"friends": [
{
"id": 0,
"name": "Mendoza Figueroa"
},
{
"id": 1,
"name": "Lenore Morales"
},
{
"id": 2,
"name": "Winifred Bowen"
}
],
"service": "lemon"
}
]
I want to display each JSON object in the different table with a buttion which toggles the table in the html.
the above is the JSON data available...
thanks in advance.
The skeleton for the code is available here https://github.com/50Cubes/WebappTest
This is the code for index.html file -
<!doctype html>
<html>
<head>
<title>Page Title</title>
<script src="main.js"></script>
</head>
<body>
<div ng-app="MyApp">
<div ng-controller="ViewJson">
<table>
<th>
<td>id</td>
<td>isActive</td>
<td>balance</td>
<td>picture</td>
<td>age</td>
<td>name</td>
<td>gender</td>
<td>company</td>
<td>email</td>
<td>phone</td>
<td>address</td>
<td>registered</td>
<td>service</td></th>
<tr ng-repeat="post in posts">
<td>{{post.id}}</td>
<td>{{post.isActive}}</td>
<td>{{post.balance}}</td>
<td>{{post.picture}}</td>
<td>{{post.age}}</td>
<td>{{post.name}}</td>
<td>{{post.gender}}</td>
<td>{{post.company}}</td>
<td>{{post.email}}</td>
<td>{{post.phone}}</td>
<td>{{post.address}}</td>
<td>{{post.registered}}</td>
<td>{{post.service}}</td></tr></table>
</div>
</div>
</body>
</html>
This is the code for main.js file. Here I am assuming that the name of json file is posts.js -
var app=angular.module('MyApp',[]);
function ViewJson($scope, $http)
{$http({method: 'POST', url: 'js/posts.json'}).success(function(data)
{$scope.posts = data;});
}