Dear all,
I have used show/hide column datatables in my app and it works perfectly, what I want to do now I want to be able to :
1. change the background-color of the buttons
2. be able to have a different background color for the button of the column hided...
thank you for helping...
I am attempting to check/uncheck a checkbox that is a column on each row. If I examine $('#grid').DataTable().rows().nodes(), this only returns the rows that are visible on the current page. Of course if I examine $('#grid').DataTable().rows(), this returns the indexes of all rows. It appears that I have to use the nodes method to actually manipulate the DOM.
Do I have to loop through all of the rows to do this?
Is there a way an easier way to check/uncheck all of the results on all pages?
Thanks.
Hi,
Am new to .Net web application, datatables and editor. I went through the basic examples in the website. I am facing an issue. Hope someone can throw some light on this.
Please find below the code that i use and error message i get.
HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="xxx.cs" Inherits="xxx" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- end required meta tags -->
<title>test</title>
<link href="../DataTables/Bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css" /><!-- Do not edit -->
<link href="../DataTables/Bootstrap-3.3.7/css/bootstrap-theme.css" rel="stylesheet" type="text/css" /><!-- Define theme changes here. -->
<link href="../DataTables/DataTables-1.10.13/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../DataTables/Buttons-1.2.4/css/buttons.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../DataTables/Select-1.2.0/css/select.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../DataTables/Editor-1.6.1/css/editor.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../Styles/test.css" rel="stylesheet" type="text/css" />
<script src="../DataTables/datatables.min.js" type="text/javascript"></script>
<script src="../Scripts/test.js" type="text/javascript"></script>
<!-- End JavaScript Includes -->
</head>
<body>
| col1 | col2 | col3 | col4 | col5 |
|---|
</body>
</html>
Javascript:
(function () {
var editor;
$(document).ready(function () {
editor = new $.fn.dataTable.Editor({
ajax: {
url: "URL to DB service",
contentType: "application/json; charset=utf-8",
dataType: "json" },
table: "#Grid-01",
fields: [
{
"label": "col 1",
"name": "col1"
},
{
"label": "col 2",
"name": "col2"
},
{
"label": "col 3",
"name": "col3"
},
{
"label": "col 4",
"name": "col4"
},
{
"label": "col 5",
"name": "col5"
}
],
formOptions: {
inline: {
onBlur: 'submit' }
}
});
var table = $('#Grid-01').DataTable({
lengthChange: false,
order: [],
ajax: {
url: "URL to DB service",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "GET",
dataSrc: "d"
},
columns: [
{ "data": "col1" },
{ "data": " col2" },
{ "data": " col3" },
{ "data": " col4" },
{ "data": " col5" }
]
});
// Display the buttons
new $.fn.dataTable.Buttons(table, [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]);
//Add the buttons to the appropriate Bootstrap class
table.buttons().container()
.appendTo($('.col-sm-6:eq(0)', table.table().container()));
$('#Grid-01').on('click', 'tbody td:not(:first-child)', function (e) {
editor.inline(this);
});
});
} ());
Output of DB service:
{"d":"[{\"col1\":\"12345\",\"col2\":\"123\",\"col3\":\"123\",\"col4\":\"100\",\"col5\":\"test_1]"}
Error message :
Datables warning: table id = Grid-01 – Requested unknown parameter ‘col1’ for row 0, column 0.
Thanks!
I am having problems getting the example .sln file to work properly.
I have successfully added my DB connection which is sql server.
However, I keep getting code errors in query.cs which I have not modified.
anyone else had this problem in the past or currently and could offer any help?
Thanks,
Ok so basically after a table has been generated/rendered through the api, I have a function that executes. The function takes fills a value in each cell of a column with the value to the cell to the left of it divided by the value of the column left to its grand total. I am not even sure I am doing the right approach for this in regards to data tables, but it works. What does not work is when I export the data table, the column is simply blank. I am assuming it is because I am not using the data tables API itself to have this column's content generated. However I am just at a loss currently on how I would achieve this since the grand total is actually generated in the footerCallback. I need the footerCallback to be completed before I can fill the values in that column of course. Any help or tips to get me on the right path would be appreciated. Also big kudos to the developers of data tables. I have been using it about a week now and it is great!
My function that executes after data tables ajax call and rendering has been completed:
$("#sct_size > tbody > tr > td:nth-child(5)").each(function () {
var x = $("#sct_size_wrapper > div > div > div > table > tfoot > tr > td:eq(3)").html();
x = x.replace(/\,/g, '');
var y = $(this).prev().html();
y = y.replace(/\,/g, '');
var result = parseFloat((y / x) * 100);
result = result.toFixed(1);
result.toString();
$(this).html(result + "%");
})
How can I change the color of Column 14 to #000000?
Something similar to $('td', row).css('backgroundColor', '#000000'); but only cells in column 14
I have tried columndefs too but it just changes the header cells in the datatable and not the child rows.
I have two DataTables on the same page. Both are fully functional. One needs to have more columns that the other and I there are business reasons I cannot combine them in a single table. I want to be able to search both tables by typing in the DataTables search box for either table. How can I make this happen? Both tables have the same class.
I can think of two possibilities for a combined search:
Which would work better? What if I add more tables to this page in the future (a distinct possibility)?
https://datatables.net/reference/event/responsive-display
I'm having a issue where the ajax reload function is causing the datatables responsive plugin to close the open row details.
table.ajax.reload( null, false );
I'm aware of a workaround for select2 fields by listening for the ajax request (below) and I am confident I'll have to use this approach with this issue.
table.on('xhr.select2Fix', function(){
My question is can I trigger the responsive plugin to open a row ID manually (for my problem here I can simply record the rowID on this event)
table.on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
or do I only have the option of using the button beside the row to toggle the expansion/retraction of the responsive display?
What works best with and/or does data tables prefer when it comes to formulas, done by client sided (js) or server sided (c#, sql, etc)? For example a column which content is generated by a formula which includes other columns or even the sum of another?
I want to know if its possible to get the rows with empty fields on this columns selecting (" ") or ("EMPTY") or something else on the column filter. I have a fiddle to explain this.
At first column (Status) I have three values (ON, OFF, (EMPTY)). My problem is to get the rows with empty values (Same row as PR00000003, PR00000005) selecting empty value on the filter.
Thanks in advace.
$(function(){
$("#addRowButton").click(function(){
alert("Click event works");
var n = parseInt($("#numberOfRowsTextBox").val(), 10);
var i=0;
var t = $("#example").DataTable();
alert("We got to the loop");
for(var i; i < n; i++){
t.rows.add(['(blank)','(blank)','(blank)','(blank)','(blank)']).draw( false );
}
});
});
Here is my code snippet - I have no errors in my console. any idea?
thanks,
J
Hi,
I need some fields from a table to caculate KPIs and show them as fieldInfo, but I don't want to show the fields in the table and in the forms as well.
I only find this both examples "Data shown only in the form" and "Data shown in table only" where you can hide it in the form or the table.
Is the an atribute ála readonly or hide for form fields?
Thanks for any support
Cheers Patrick
Hey there,
I'm having a issue with the Select2 plugin where the plugin requires a blank value as the first option so that the field doesn't default to the first option in the list (a legitimate value). I need to inject my own options.
fields: [
{
"label": "User Group Visibility:",
"name": "TaskType.UserGroupVisiblity",
"type": "select",
"multiple": true,
"separator": ',',
"options": [
{ label: "No Group Association", value: "Any" },
{ label: "Tech", value: "Tech" },
{ label: "Truckload", value: "Truckload" },
{ label: "Pricing", value: "Pricing" }
]
}
Like the example above basically, but I need the options that come over with this as well to combine into the predefined options. (see below for my server side code)
Field::inst( 'TaskType.UserIDAssociatedTo' )
->options( 'Users', 'id', array('EmailAddress', 'FirstName', 'LastName'), null, function ( $row ) {
return $row['FirstName'].' '.$row['LastName'].' ('.$row['EmailAddress'].')';
} )
Secondary but partially related issue, I have my table set to refresh the data at specified intervals using the code below
setInterval( function () {
table.ajax.reload( null, false ); // user paging is not reset on reload
}, interval );
But it seems that when i do this it is resetting the value of the select2 plugin to the value it was initialized with instead of what is in the record I have open to edit.
I'm happy to provide access to the page if someone can take a look.
Allan,
I have created a column which is the sum of 2 cells in the row.
When I total (footerCallback) the columns, the original 2 columns total just fine, but the rendered summed columns fail to total.
I tried to remove currency rendering from all my data, but that had no effect.
Any help would be greatly appreciated, as I have spent all day on this, and fail to understand why it does not work.
Javascript:
var myTable = $("#myTable").DataTable( {
dom: "t",
"rowCallback": function( row, data, index )
{
if ( data.myDbTable.id == 6 )
{
$("td", row).closest("tr").removeClass("even");
$("td", row).closest("tr").removeClass("odd");
$("td", row).closest("tr").css("background-color","blue");
$("td", row).closest("tr").css("color","white");
$("td", row).closest("tr").css("font-weight","bold");
//$("td", row).eq(1).css("font-weight","bold");
}
},
"ordering": false,
"serverSide": false,
"paging": false,
ajax: {
"url": "myAjax.php",
"type": "POST",
data: function(d) {
d.param1="' . $param1 .'";
d.param2="'.$param2.'";
d.param3="'.$param3.'";
}
},
columns: [
{ data: "myDbTable.id", "sClass": "binCentered" },
{ data: "myDbTable.field1", "sClass": "binCentered" },
{ data: "myDbTable.field2", "sClass": "binCentered",
render: $.fn.dataTable.render.number( ",", ".", 0, "$" ) },
{ data: "myDbTable.field3", "sClass": "binCentered" ,
render: $.fn.dataTable.render.number( ",", ".", 0, "$" )},
{ data: "myDbTable.field4", "sClass": "binCentered" },
{ data: null, "sClass": "binCentered", render: function (data, type, row)
{
var numFormat = $.fn.dataTable.render.number( ",", ".", 0, "$" ).display;
var total = parseInt(data.myDbTable.field2) + parseInt(data.myDbTable.field3);
return numFormat(total);
}
},
{ data: null, "sClass": "binCentered", render: function (data, type, row)
{
var numFormat = $.fn.dataTable.render.number( ",", ".", 0, "$" ).display;
var total = parseInt(data.myDbTable.field2) + parseInt(data.myDbTable.field3);
return numFormat(total);
}
},
{ data: "myDbTable.field4", "sClass": "binCentered" },
{ data: "myDbTable.field5", "sClass": "binCentered" }
],
order: [[0, "asc"]], // sort by hidden id column
"columnDefs": [
{
"targets": [ 0 ],
"visible": false // Hide my ID column
}
],
buttons: [
"excelHtml5"
],
"footerCallback": function ( row, data, start, end, display )
{
var api = this.api(), data;
var numFormat = $.fn.dataTable.render.number( ",", ".", 0, "$" ).display;
// Remove the formatting to get integer data for summation
var intVal = function ( i )
{
return typeof i === "string" ?
i.replace(/[\$,]/g, "")*1 :
typeof i === "number" ?
i : 0;
};
// Total Column 2 over all pages
total = api
.column( 2 )
.data()
.reduce( function (a, b)
{
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 2 ).footer() ).html
(
numFormat(total)
);
// Total Column 3 over all pages
total = api
.column( 3 )
.data()
.reduce( function (a, b)
{
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 3 ).footer() ).html
(
numFormat(total)
);
// Total Column 4 over all pages
total = api
.column( 4 )
.data()
.reduce( function (a, b)
{
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 4 ).footer() ).html
(
numFormat(total)
);
// Total Column 5 over all pages
total = api
.column( 5 )
.data()
.reduce( function (a, b)
{
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 5 ).footer() ).html
(
numFormat(total)
);
// Total Column 6 over all pages
total = api
.column( 6 )
.data()
.reduce( function (a, b)
{
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 6 ).footer() ).html
(
numFormat(total)
);
}
});
html
<table id="myTable" class="cell-border table-bordered" cellspacing="0" width="100%" margin-left=auto margin-right=auto>
<thead>
<tr style="height: 10px;">
<th>ID</th>
<th></th>
<th>field2</th>
<th>field3</th>
<th>field4</th>
<th>field5</th>
<th>field6</th>
<th>field7</th>
<th>field8</th>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
<th>field2</th>
<th>field3</th>
<th>field4</th>
<th>field5</th>
<th>field6</th>
<th>field7</th>
<th>field8</th>
</tr>
</tfoot>
</table>
I am stacking several tables on a page, and they share the same header (but different math)
Please describe exactly how to add a button that'll only refresh the current tab.
Ideally the Buttons plugin would offer a built-in Refresh button but it does not. We fetch data with "ajax": {"url":"getmyajax.foo"} so hopefully the process of adding a button that reloads it, and the tab itself, is moderately straightforward. Thanks :-)
I included four buttons for the table in question...Copy, Excel, CSV, and PDF. Three of which work fine, although the PDF output leaves things to be desired. The problem lies in the CSV export.
On my local development server everything is fine. ON the production server, everything is fine for each user...when I check using their logins.
However one user...so far... has reported an problem that I cannot find any reference to in these pages. His screen reports that a blob has been made instead of the requested csv file. The blob contains all the correct information....just not comma separated.
The copy button works fine and generates CSV.
Is this...error... being caused by the user computer (MacBook Pro) or what? I cannot recreate it on my computer
I attach a screenshot to explain and ask if you have ever seen this before...as well as what can be done.
I also enclose all the links in the file in question
From the head...
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- Bootstrap CSS files -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker3.min.css"/>
<!-- orig CSS files -->
<link href="//cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/buttons/1.1.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/select/1.1.0/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-colvis-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0/datatables.min.css"/>
<!-- datatables styling css -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
<!-- -->
<!-- The wss css -->
<!-- from datatables buttons -->
<link rel="stylesheet" href="//code.jquery.com/jquery-1.12.4.js">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
<link rel="stylesheet" href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
<link rel="stylesheet" href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js">
```
The javascript at the end of the body...
<script src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/buttons/1.1.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/select/1.1.0/js/dataTables.select.min.js"></script>
<script>
$(document).ready(function() {
var uname = 'George ';
var fname = 'Export';
var from = '12.01.2016';
var to = '12.28.2016';
var drange = from +'-'+to;
$('#tsSumm').DataTable( {
// autoWidth: 'false',
// searching: false,
dom: '<<B>fr<t>lip>',
buttons: [
'copy', 'excelHtml5', 'csv',
{
'extend': 'pdf',
'text':'PDF/L',
'orientation': 'landscape',
'pageSize': 'LETTER',
'filename': uname + ' '+fname + ' '+drange,
exportOptions: {
modifier:{page: 'current'},
columns: [0,1,2,3,4,5,6,7]
}
}
],
'sorting':[[1,'desc']]
} );
} );
</script>
````
As you can see, I included an Excel button, but this button generates an XML file and not an XLS or XLSX file. Since the CSV and copy are giving the desired result...with the exception of the problem of the BLOB, I am considering dumping the excel button.
Thanks
kct3937
What I want to achieve is a column toggle (have a set of available columns, and allow them to be toggled). The way I was attempting to achieve this was:
a) Build the DOM with all columns
b) Initialize the table with the columns that I want
c) Present the selection of columns to the user, and if they toggle columns repeat steps (a) and (b)
I know this isn't terribly efficient, but my table size is relatively small, and mostly it works well if savestate is not enabled.
If savestate is enabled, then the "visible" property of the column appears to be ignored.
This works, and hides the column(s), but doesn't save state:
$('#' + tableid).DataTable(
{
"columnDefs": [
{
"targets": [0],
"visible": true,
"searchable": false
},
{
"targets": [1, 2],
"visible": true,
"searchable": true
},
{
"targets": [3],
"visible": false,
"searchable": true
}
]
}
);
This saves state properly, but shows all columns:
$('#' + tableid).DataTable(
{
"columnDefs": [
{
"targets": [0],
"visible": true,
"searchable": false
},
{
"targets": [1, 2],
"visible": true,
"searchable": true
},
{
"targets": [3],
"visible": false,
"searchable": true
}
],
stateSave: true
}
);
};
To be honest, I would be OK with any of the following outcomes:
1) A widget that would allow me to toggle columns
2) A way of toggling columns on an initialized table, rather than destroying and re-creating (am I missing something in the docs?)
3) A complete hack that involves messing with the saved state
I really like to have state saved, since re-drawing columns isn't great user experience if they have made search or other selections, but I also need to be able to toggle columns, since I potentially have too many to comfortably fit on a page and some are only needed occasionally.
Thanks,
Dave
Hi All,
I am not getting the solution of resizing of data table as per requirement, so if any body have the solution so help me for resizing the data table.
We freshly purchased Editor, but we are bloody beginners, maybe somebody have a hint for us.
We are using Scripts made by the editor generator, wich works very good. But in one script we try to pass a Parameter via ajax, which ist failing.
Our script receive datas without any problems as long as we pass URL like:
ajax: "php/table.tbl_prices.php",
But if we try to pass an URL with Parameter for a WHERE-Condition like
ajax: "php/table.tbl_prices.php?project_id=2",
our script do not receive any data.
If we run the "table.tbl_prices.php?project_id=2"-Script directly, it will return Data like:
{"data":[{"DT_RowId":"row_235","project_id":"31","price_group":"A","price":"3555.00"}......
So the script table.tbl_prices.php can handle the parameter.
How we pass the parameter correctly?
More easy would be, if we could pass the WHERE-condition directly from my script like:
var editor = new $.fn.dataTable.Editor( {
where: ['project_id', <?php echo $project_id; ?>),
ajax: "php/table.tbl_prices.php?project_id=2",
table: '#tbl_prices'.....
But I think this in not possible. Is there another way to pass variables to table.tbl_prices.php?