In the below code I'm trying to put a button (icon) in the cell(column) and trigger page location change on the Controller. I cannot seem to get "data" in the .click function on line 22. New in this arena so info help is appreciated.
Hello,
I've added date time picker on a custom field within the editor, but the problem that every time I trigger an error on that composite field, the picker displays even there's no error with the date itself.
I've done it like so:
new Editor.DateTime($('input.date', this), $.extend({
format: conf.format, // can be undefined
i18n: that.i18n.datetime,
onChange: function () {
$('input.date', self).trigger('input');
$('input.date', self).trigger('change');
}
}, conf.opts));
How I can disable datetime picker from being shown completely even if there's an error with the date field?
Thanks in advance.
I saw the example in the documentation for using a column renderer to make the value in the column a hyperlink. However I wanted to make the entire row or cell a hyperlink, not just the text within it (and not using css display). I was curious how you would go about making a row or column a hyperlink using jquery delegated events and the data-href attribute. I got this working by simply referring to the actual table data with the following:
I have a custom made filter function on my website where I am using one of your datatables. When initializing the datatable one can add parameters with the "data" option. I want to do this, but only if search terms are provided. The amount of search terms and their key-value pairs will be known at runtime which is why I can't define them at datatable initialization.
I am basically looking for a possibility to simply add (remove) up to n parameters to (from) the request url:
I know about the option to add parameters at runtime by using a function for "data", but I didn't understand how to use it in my case. Maybe someone can provide an example of how to do this.
Hi there, this is my first time trying to use DataTables, I'm trying to use the Row().remove() but I am not even able to trigger it via the button and I don't know what I am doing wrong.
I tried hooking it to the button using id's or classes but I am still unable to do so.
=== JS ===
let table = $('#existingVariableTable').DataTable();
$('#existingVariableTable tbody').on('click', 'img.icon-delete', function () {
alert("click");
});
Hi °
I have loaded the data in my table and everything is going well, the problem is when I want to update the table depending on the filters with external controls.
This filter returns the same result in a WebMethod with asp.net c #, it only returns less data than the first load.
function CargarGridBonds() {
if ($.fn.dataTable.isDataTable('#gvBonds')) {
var jsonData = null;
var tv = $('#ContentPlaceHolder1_cboTv').val();
var issuer = $('#ContentPlaceHolder1_cboIssuer').val();
var serie= $('#ContentPlaceHolder1_cboSerie').val();
var emisor= $('#ContentPlaceHolder1_cboEmisor').val();
var fecha=''
$.ajax({
type: 'POST',
url: "Name.aspx/GetBondsFilter",
contentType: "application/json; charset=utf-8",
async: false,
dataType: 'json',
data: "{ 'tv':'" + tv + "','issuer':'" + issuer + "','serie':'" + serie + "','emisor':'" + emisor + "','fecha':'" + fecha + "'}",
success: function (json) {
var datos = json.d.data;
jsonData = JSON.stringify(datos);
},
failure: function () {
alert("Sorry,there is a error!");
}
});
table .clear().draw();
table .rows.add(jsonData ); // Add new data
table .columns.adjust().draw(); // Redraw the DataTable
}
else {
table = $("#gvBonds").DataTable({
scrollY: "600px",
scrollX: true,
scrollCollapse: true,
paging: false,
'searching': false,
"bFilter": true,
ajax: {
method: "POST",
url: "Name.aspx/GetBondsJson",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: function (d) {
return JSON.stringify(d);
},
dataSrc: "d.data"
},
columns: [
{ 'data': 'IdentifierID', "visible": false },
{ 'data': 'TV' },
{ 'data': 'Issuer' },
{ 'data': 'Series' },
{ 'data': 'Emisor' },
{
data: 'FechaVencimiento',
type: 'date',
render: function (data, type, row) { return data ? moment(data).format('DD/MM/YYYY') : ''; }
},
{ 'data': 'IsShortRate' },
{ 'data': 'Liquidity_Desc' },
{ 'data': 'Internal_Desc' },
{ 'data': 'Global_Fitch_Desc' },
{ 'data': 'Global_Moodys_Desc' },
{ 'data': 'Global_SP_Desc' },
{ 'data': 'Global_HR_Desc' },
{ 'data': 'Local_Fitch_Desc' },
{ 'data': 'Local_Moodys_Desc' },
{ 'data': 'Local_SP_Desc' },
{ 'data': 'Local_HR_Desc' }
],
'columnDefs': [{
'targets': 6,
'searchable': false,
'orderable': false,
'className': 'dt-body-center',
'render': function (data, type, full, meta) {
var is_checked = data == true ? "checked" : "";
return '<input type="checkbox" class="checkbox" ' +
is_checked + ' disabled/>';
}
}],
"language": {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla =(",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
},
"buttons": {
"copy": "Copiar",
"colvis": "Visibilidad"
}
},
});
new $.fn.dataTable.FixedColumns(table, {
leftColumns: 4
});
}
}
The problem is when I call the function from a button, the next line is validated where the datatable is already built.
After it is imported and they have reviewed the data, I need the user to click a button to call a stored procedure. The stored procedure is parsing the data and putting into another table, which is the datasource for another datatable. But the stored procedure itself does not return any data. From what I am researching, since datatables uses MVC i need to put that call in a controller.
public class ParseImportDataController: ApiController
{
[HttpGet]
[HttpPost]
public IHttpActionResult cleanAndImport()
{
var request = HttpContext.Current.Request;
var settings = Properties.Settings.Default;
string AsOfCookie = request.Cookies.Get("AsOfDate").Value;
string strCon = settings.DbConnection;
SqlConnection DbConnection = new SqlConnection(strCon);
DbConnection.Open();
SqlCommand command = new SqlCommand("sp_ImportFTE", DbConnection);
command.CommandType = System.Data.CommandType.StoredProcedure;
command.Parameters.Add(new SqlParameter("@EffectiveDate", AsOfCookie));
command.ExecuteNonQuery();
DbConnection.Close();
return Ok(1); //no idea what to return
}
}
I can't find out how I have the button click call this code in the controller. Can I use Buttons to add a custom button that will call the cleanAndImport function?
I have no idea if the code in the controller is correct, but I figure that will be the next struggle.
So I'm using scroller with a very large table (>30000 rows) with server side processing.
If I'm in the middle of the table somewhere, and click the reload icon in the browser, It will re-draw the table, and load the data from the position I was before the redraw, as expected.
The problem is that the scrollbar stays at the top, so you cannot see the data that was just loaded as it's way down in the table somewhere. if I click the down arrow at the bottom of the scrollbar, it then loads the next batch of data from the server, and draws it at the top of the table, so now you can see the data, but cannot scroll up, as it's close to the top of the table.
This seems to be a new issue, as it didn't occur until we upgraded to version 2.0.1
The site is behind a firewall, so I can't attach a link.
I tried to use the debugger to upload the configuration information to you, but it appears i'm getting a 500 response from your server.
I have problem with getting Bootstrap to play with DataTables and flex in phone-mode using an Android Phone in Chrome. With iOS there is no problem. Have a look at the screenshot taken from https://datatables.net/examples/basic_init/flexible_width
The table stretches out of the grid. Any suggestion for getting it to stay inside?Image may be NSFW. Clik here to view.
Is there a way to sort of attach a document to a cell? Like adding a PDF?
I am currently working on an internal ordering system where people create orders, add items with this plugin...and hopefully would be able to attache for example a mechanical drawing to an order item cell in the order...
So can I somehow attach a hook to enable a file upload?
Ok this is mysql database, java using eclipse springboot webapp. Everything works but the data comes back as one big unformatted blob on the jsp page when going to web site localhost:8080/index. I know I am almost there but somethings not 100% correct.I removed the jsp datatable part on the jsp and got the same result, so the page is apparently not seeing that but I dont know why?
I am using the datatables print funtions with autoPrint: true but when cancel the print the print window get closed.
Is there any option available where we can keep the print window open after print or cancel print.
I try to run example from editor downloaded, and get this issue.
Access to XMLHttpRequest at 'file:///C:/xampp/htdocs/Editor/controllers/staff.php?=1581480890759' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https./C:/xampp/htdocs/Editor/controllers/staff.php?=1581480890759:1 Failed to load resource: net::ERR_FAILED.
How can I use BeforeSend ajax property with jquery datatables?because my server side api want autharization..I used headers instead of BeforeSend but it gave 405 error
When I press the "Toggle Column Sets" button, it currently gives me the option of toggling each of the columns 1-5 individually. I want it so that when I press "Toggle Column Sets", it instead gives my an option to toggle [1,2] or [3,4,5] as groups.
I migrated a working project from .net core 2.1 to 3.1 and I am now receiving this error from: jquery.dataTables.min.js Uncaught TypeError: Cannot read property 'length' of undefined
I am fetching data from the database successfully but displaying it is causing this error.
I tried with both DataTables Editor v1.9.0 and DataTables Editor v1.9.2 and with both DataTables-1.10.19 and DataTables-1.10.20
The datatable contains child rows.
The table's data should refresh after 5 seconds, but, as soon as the page refreshes, the rows that are in row.show() state revert back to their hidden state. I want to refresh the table values such that the state of the table is maintained. Django is used for backend which is reading the data from a mysql database.
{% extends "tableviewer/base.html" %}
{% block content1 %}
<!-- head section -->
<style>
@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
td.details-control {
background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
</style>
{%endblock%}
{% block content %}
<!-- body section -->
<!-- <button type="button" class="refresh">Reset Table</button> -->
<table id = "table1">
<thead class = "thead">
<tr>
<th></th>
<th>
AUTHOR ID</th>
<th>AUTHOR NAME</th>
<th>Article</th>
<th>Random Values</th>
</tr>
</thead>
<tbody>
{% for aob in obj %}
<tr data-child-value="abcd">
<td class="details-control"></td>
<td>{{aob.authId}}</td>
<td>{{aob.authName}}</td>
<td>{{aob.article}}</td>
<td><font color = {{color}}>{{random_nos}}</font></td>
<!-- <td><font color = {{color}}><div id = "autochange">{{random_nos}}</div></font></td> -->
<!-- <td id = "autochange"><font color = {{color}}>{{random_nos}}</font></td> -->
</tr>
{%endfor%}
</tbody>
</table>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script type="text/javascript">
function format(value) {
reVal = '<div>Hidden Value: ' + value + '</div>';
return reVal;
}
$(document).ready(function () {
var table = $('#table1').DataTable({});
// Add event listener for opening and closing details
$('#table1').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
//alert("inside isShown == True");
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
//alert("inside isShown == False");
// Open this row
row.child(format(tr.data("data-child-value"))).show();
tr.addClass('shown');
}
});
});
</script>
{% endblock %}
