Is there any option to display both the exporting options and page length options at the same time? Also exporting options at the top of the table and page length option at the bottom?
↧
Display both exporting options and page length.
↧
Can't get JSON data to show using JS object variable; works with AJAX
I've been tinkering with Allan's example to show inline child data in a table, with the +/- button. I'm able to get it to work with my own data using ajax if I access it from a text file. However, I can't seem to access exactly the same data from a javascript variable. I have the problem set up here: http://live.datatables.net/xaduruni/1/watch?html,js,output
Here's the relevant successful code:
var table = $('#example2').DataTable( {
"ajax": 'json.txt',
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "ID" },
{ "data": "CAGE" },
{ "data": "Name" }
],
"order": [[1, 'asc']]
} );
The contents of json.txt are:
{
"data": [
{
"ID": "6",
"Name": "Nocturnal Aviator Electronics",
"CAGE": "ZZZZZ",
"Type": "B",
"City": "Wartrace, TN",
"POC": "Bob Rodes",
"phone": "123-234-3458",
"fax": "123-234-8765",
"Mem": "Y",
"NSNs": "0",
"RFQs": "0",
"OD": "3"
}
]
}
Now, when I change the above code to put the contents of json.txt into an object variable, I get no records. I don't see anything in the doc that says I can't do this (in fact it says I can), so I must be doing something wrong. Can someone explain?
TIA
Bob
↧
↧
Inline edit problem
I tried to use inline edit to edit data and store the after change data back to data array in memory. The code is listed below.
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>Editor example - Simple inline editing</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.0/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init"></style>
<style type="text/css" class="init">
td.editable {
font-weight: bold;
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.0/js/dataTables.buttons.min.js">
</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js">
</script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js">
</script>
<script type="text/javascript" language="javascript" >
$(document).ready(function () {
var editor;
var row, column;
var dataObjs = [
{
"ID": 0,
"FirstName": "Jane",
"LastName": "Doe"
},
{
"ID": 1,
"FirstName": "Balck",
"LastName": "Smith"
}];
$('#example').on('click', 'tbody td.editable', function (e) {
editor.inline(this);
});
editor = new $.fn.dataTable.Editor({
table: "#example",
idSrc: "ID",
fields: [
{
label: "FirstName:",
name: "FirstName"
}
]
});
console.log(dataObjs);
var table = $('#example').DataTable({
dom: 'rit',
data: dataObjs,
columns:
[
{ data: "ID"},
{ data: "FirstName", className: 'editable' },
{ data: "LastName" }
]
})
$('#example').on('click', 'tbody td.editable', function (e) {
row = table.cell(this).index().row;
column = table.cell(this).index().column;
editor.inline(this);
});
$('#example').on('blur', 'tbody td.editable input', function (e) {
var newVal = $(this).val();
dataObjs[row]["FirstName"] = newVal;
table.rows().invalidate();
table.draw();
});
});
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" style="width:50%">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
</body>
</html>
But when I run the code, some things wired happens. The problem can be reproduced following the steps below.
- Click the first name cell containing value "Jane", change the value to "Jane1".
- Move mouse to the cell containing last name "Doe", click mouse, the first name value remains "Jane1".
- Keeping mouse on the last name "Doe" without moving it, click the mouse again, the first name value changes back to "Jane".
- Move mouse to the cell of first name "Black" and click. Don't need to change anything.
- Move the mouse to anywhere out of cell "Black" and click, the value of cell "Jane" changes to "Jane1".
- After that, no matter where you click, the value "Jane1" remains.
Does anyone know what the problem is and how to fix it? Thanks.
James
↧
parse json ajax
hi i have a simple table
<table id="tablefiles">
<thead>
<tr>
<th> id </th>
<th> File </th>
<th> type </th>
<th> Modified Time </th>
<th> size </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
i want:
1-create definition of colum in datatable
2-call my rest and parse the success before Datatable insert data in store.
my json schema :
{
"files": [
{
"id": 1,
"uri": ".idea",
"filename": ".idea",
"directory": true,
"attributes": {
"lastModifiedTime": "2016-04-22T14:50:56Z",
"isDirectory": true,
"size": 4096
}
},
{
"id": 2,
"uri": ".svn",
"filename": ".svn",
"directory": true,
"attributes": {
"lastModifiedTime": "2016-04-22T14:50:56Z",
"isDirectory": true,
"size": 4096
}
}
]
}
i must use only some property in my schema json.
it's possibile???
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
↧
Remove row of datatable is not selected
Hello,
I want to delete a line from my datatable but I can not. Indeed, I have a table users with a hidden field "id" of it. How can I delete this line ...
My use case is this: I have 5 operators that update at the same time a user list and it must therefore always be updated via WebSocket clients will be notified of the change. This WebSocket sends me "userId" was deleted from the user list.
I can not send indexRow because if other operators are not on the same page it all wrong.
thank you in advance
↧
↧
AI documentation
some time i don't undestand because many guys write code with 1000 property and in official doc not present any one!
aoColumns
mdata
osomethis, some that!! why all these are not in doc?
↧
Ultimate Date / Time sorting Plugin error
Hi There,
I am using a the Ultimate Date / Time sorting Plugin and I keep getting the following error:
datetime-moment.js:31 Uncaught TypeError: Cannot set property 'moment' of undefined
I am loading the moment.js script before the plug-in!
Please help!
↧
server-side from ASP.NET webmethod
I really want to use DataTables to display data on my site, but some of the queries are pretty resource intensive, and can have results of 40,000+ records, so I want to do serverside processing. However, I just can't get the datatables javascript to talk to the webmethod in my codebehind. A very similar ajax call works fine, but when using ajax within DataTables, I get zero feedback in Google Chrome's developer tools. Any idea to find out what is happening with the POST?
This works fine:
var source = {};
$.ajax({
type: 'POST',
dataType: 'json',
url: "/Reports/candftest.aspx/dtquery",
contentType: 'application/json; charset=utf-8',
cache: false,
data: {},
success: function (response) {
source = $.parseJSON(response.d);
alert(response.d); // i can see Json formatted data
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
}
});
But this doesn't work, or even give an error to work off of:
$(document).ready(function () {
$('#cfTable').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"type": "POST",
"dataType": 'json',
"url": "/Reports/candftest.aspx/dtquery",
"contentType": "application/json; charset=utf-8",
"data:": {},
"success": function (response) {
var source = $.parseJSON(response.d);
alert(response.d); // i can see Json formatted data
return source
},
"error": function (XMLHttpRequest, textStatus, errorThrown) {
alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
}
},
"columns": [
{ "data": "id" },
{ "data": "fname" },
{ "data": "mname" },
{ "data": "lname" },
{ "data": "nickname" },
{ "data": "dob" }
]
});
});
For my code-behind, I just set up some test data to use until I can get it at least populating, before I start interacting with my database and do any processing:
private const int TOTAL_ROWS = 995;
private static readonly List<DataItem> _data = CreateData();
public class DataItem
{
public string id { get; set; }
public string fname { get; set; }
public string mname { get; set; }
public string lname { get; set; }
public string nickname { get; set; }
public string dob { get; set; }
}
public class DataTableData
{
public int draw { get; set; }
public int recordsTotal { get; set; }
public int recordsFiltered { get; set; }
public List<DataItem> data { get; set; }
}
private static List<DataItem> CreateData()
{
Random rnd = new Random();
List<DataItem> list = new List<DataItem>();
for (int i = 1; i <= TOTAL_ROWS; i++)
{
DataItem item = new DataItem();
item.id= id.ToString();
item.fname = "testa";
item.mname = "testb";
item.lname = "testc";
item.nickname = "testd";
DateTime dobdt = new DateTime(1900 + rnd.Next(1, 100), rnd.Next(1, 13), rnd.Next(1, 28));
item.dob= dobdt.ToShortDateString();
list.Add(item);
}
return list;
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string dtquery(string sEcho, int iDisplayStart, int iDisplayLength)
{
DataTableData dataTableData = new DataTableData();
List<DataItem> list = new List<DataItem>();
foreach (DataItem dataItem in _data)
{
list.Add(dataItem);
}
dataTableData.data = list;
JavaScriptSerializer jss = new JavaScriptSerializer();
return jss.Serialize(dataTableData);
}
↧
loading table from AJAX
My HTML looks like this :
<table id='userTable' class='table table-striped table-bordered' >
<thead>
<tr><th>Column One</th><th>Column Two</th><th>Column Three</th></tr>
</thead>
<tbody></tbody>
</table>
I initialise dataTables like this :
$('#userTable').DataTable({
"ajax": {
"url": "data.json"
},
});
data.json looks like this :
{
"data": ["columnOne","second column","3rd col" ]
}
But my table looks like this on the screen :
Column One Column Two Column Three
3 r d
c o l
s e c
ie - 1 Character from each string per column
What am I doing wrong ?
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
↧
↧
Disable sorting on first column with new constructor
Hello guys,
I'm using the new DataTable constructor (DataTable). I need to disable sorting on first columns of one my table, but i only found info about old constructor. How can i use disable sorting on new?
Thanks in advance!
Simone
↧
how much row can I copy using copy button
How much row can I copy using copy button
Because I am trying to copy more than 3500 rows at time and they will not work
so how much row can I copy
↧
DataTable Column Visibility no title in server-side
I did as this exmple - https://datatables.net/extensions/buttons/examples/column_visibility/simple.html
But I click Column Visibility button, it did not display column title.
↧
Datatables With Responsive details row getting data with link click
HI,
I've been working on a custom use of the data-tables with the responsive plugin, and struggling with something i can't work out, have done a fair amount of searching but can't find a solution.
Basically its a data table with the responsive plugin enabled, that has multiple columns, and the last column, is a link to perform another action.
On this link i am trying to get the data of the current row, so i can use the data. It works until i enable responsive.
However this table doesn't fit on the page properly as there is too many columns, so i have enabled responsive plugin, so they gain the details below the row with the + button. But when the detail row is shown, the link code breaks because the table structure has changed.
The basic code for this example is below, I'm not sure how the structure changes on responsive row shown, so not sure what jquery selectors i should be using to get to the data.
$('#example').on('click', 'a.custom_action', function (e) {
e.preventDefault();
var tr = $(this).closest('tr');
var row = table.row( tr );
alert(row.data());
} );
} );
A full example jsfiddle to this issue, can be viewed by clicking https://jsfiddle.net/bx4s4p5b/3/ you can see the link works when responsive is disabled https://jsfiddle.net/bx4s4p5b/2/
any pointers in the right direction would be great.
cheers
Tim
↧
↧
server side pagination
Good day guys,
i have been using datatables for sometime now and its really cool, i can do a lot with it.
But i have come to a stand still here.
I have a project am working on in which i am using datatables to display data on all my pages.
I am currently using ssp:class to do my server side scripting, the problem i am having is that on my report page i have to make a query which gets values from other tables in order to filter the output of the reports page.
the issue now is that the my ssp:class cannot run such structure of query,how do i do his please ?
↧
Order alphabetical column visibility button columns pop up
Before the Datatables upgrade to 1.10.*, we were able to order alphabetical the columns in the 'ColVis' button https://datatables.net/release-datatables/extensions/ColVis/examples/button_order.html .
But now, after the upgrade, I cannot found the way to do so.
Does anybody know if there is a way of doing that?
The buttons code looks like:
buttons: [
{
extend: 'columnVisibility',
text: 'Clear all',
visibility: false
},
{
extend: 'colvis',
columns: ':not(:last-child)'
}
],
↧
Special Handling of Certain Columns on Export
I am porting a table to DataTables that permits user interaction in certain columns. One column has four checkboxes that could randomly be selected per cell. PHP posts fire to save the data on the backend. Another column has a dropdown that can be manipulated within the cell and php posts fire for it as well. When I attempt a csv export with datatables, all of the dropdown options are written. Is it possible to override export on certain columns to only write the selected option? And only the checked boxes?
Thanks
Alec
↧
Remove rows using editor
Hi,
I have a problem using the editor.
I want to delete the selected rows and looking into your APIs I've seen this:
editor.message( "Are you sure you want to remove rows?" );
editor.remove( rows, 'Delete rows', {
"label": "Confirm",
"fn": function () { this.submit(); }
} );
Now I want to define rows as the selected rows.
Using rows=table.rows('.selected') works for only 1 row but it doesn't work for 2 or more rows.
How can I solve?
Thank for your time
↧
↧
Selectpicker
Hello
I use datatable for a huge table, and i like to customize the select using this librairies https://silviomoreto.github.io/bootstrap-select/
This code work :
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
this.api().columns().every( function (colIdx) {
if (colIdx == 4 || colIdx == 5 || colIdx == 6 || colIdx == 7 || colIdx == 8 || colIdx == 9 || colIdx == 10) return;
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(this.value)
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
} );
This code don't work
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
this.api().columns().every( function (colIdx) {
if (colIdx == 4 || colIdx == 5 || colIdx == 6 || colIdx == 7 || colIdx == 8 || colIdx == 9 || colIdx == 10) return;
var column = this;
var select = $('<select class="selectpicker" data-live-search="true"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(this.value)
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
} );
I don't understand why
Thank you for your help and sorry for my bad english
↧
Server Side Processing with more complex JSON object.
Hey everyone. I have a search page that has check/radio button filters on the left side, a search box at the top, and a datatable to display results. Clicking the search button, checking a filter checkbox/radio, or changing the datatable pagination calls a function on my Controller that returns a JSON object. I want all actions to go through the same point because everything the count items on each filter option, as well as the results, will change on every action.
My datatable is set up for ServerSide processing and the JSON being returned looks like this:
{
"OtherStuff": {},
"FilterStuff": "stuff",
"DTResults": {
"draw": 10,
"data": [],
"recordsFiltered": 10,
"recordsTotal": 10
}
}
The DTResults property of my JSON is what I want to bind to the DataTables, but the rest of the properties are used elsewhere on my page for things like updating counts next to filter items. How do I get the Results.DTResults to bind to my DataTable (enabling pagination) while still letting me use the rest of the JSON to change everything else on my page?
↧
DataTable in DataTable?
Hey guys,
i'm new in using dataTables and now i tried to put a dataTable in a <td> </td> from an existing dataTable, but with my code it doesn't work. Does anybody know if or how that works fine?
And is it possible that the child-DataTables get ordered with the order buttons from the parent-DataTable?
I would be very glad to get some more informations about this.
Thank you very much :-)
↧