Hola, no tengo el botón x para borrar el campo de búsqueda, lo he visto en varios ejemplos pero no se lo que necesito.
↧
Botón x en el campo de búsqueda
↧
Excel Export Add Rows and Data
Hello everyone,
i am now trying to modify the table before saving it as EXCEL and i don't know how to add two sentences before the table starts. For example add one new row before the table and input there a text. I am now using the following code to make the column G blue. I can use the customize ability, but no idea how 
buttons: [{
extend: 'excel',
text: 'Save in EXCEL',
filename: 'td900',
customize: function(xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
// $('c[r=A1] t', sheet).text( 'Custom text' );
// Loop over the cells in column `F`
$('row c[r^="G"] ', sheet).each( function () {
// Get the value and strip the non numeric characters
if ( $( this).text() !== "needed Adjustment" ) {
$(this).attr( 's', '20' );
}
});
}
}]
↧
↧
Uncaught TypeError: define is not a function
Hello,
Datatables and the editor works fine but I noticed this error in the console. How do I get rid of it? At first I thought my editor file might be corrupted. Re downloaded it and restarted my page but console still displays the same message.
↧
ColVis 1.5.1 bug with Bootstrap 3 carousel
When I have a datatable with ColVis 1.5.1 inside a div with class="carousel-inner" of Bootstrap 3, then the column chooser popup closes when I click on an entry and the chosen column will not hide.
It works fine with Buttons/ColVis 1.4.0.
Example: http://jsfiddle.net/cn5hjpew/
Thanks!
Edit:
Just saw that there is a ColVis category. I don't see how I can post there.
↧
Select extension and button on row
i have buttons in rows. The problem is when i click on a button that is inside a cell , the row is selected and i dont want that. Is there a way to stop propagation....
obj.tbl.on('select', function (e, dt, type, indexes) {
and e parameter is always the row and type also the row...
Thanks for your help
↧
↧
Inline editing for child grid
Hello,
I would like to do inline editing for my child row. It throws me an error
dataTables.editor.min.js:10 Uncaught TypeError: Cannot read property 'contents' of undefined
at Editor.(anonymous function).(anonymous function) [as inline] (http://localhost:3030/libs/DataTables/Editor-2018-06-26-
1.7.3/js/dataTables.editor.min.js:10:82145)
at dataTables.editor.min.js:10
at dataTables.editor.min.js:10
I have attached the code for your reference.
↧
Rounding issuse
I am having a problem with rounding in DataTable Editor and I need some insight on why this calculation is not returning the correct result. I suspect it is happening in the front-end JS. I may need a rounding function here.
Here is the PHP server side results and script.
Before: HRWPER: 3.5; HRYREG: 13.01
After : HRWAMT: 0.45535; HRWNEW 13.46535
file_put_contents(
$temp_file,
"Before: HRWPER: {$values['HRWPER']}; HRYREG: {$values['HRYREG']}\n"
);
// Calculate Amount of Increase based on Percent
$HRWAMT = $values['HRWPER'] * .01 * $values['HRYREG'];
// Calculate New Hourly Rate
$HRWNEW = $values['HRYREG'] + $HRWAMT;
file_put_contents(
$temp_file,
"After : HRWAMT: $HRWAMT; HRWNEW $HRWNEW\n",
FILE_APPEND
);
Here is the JS and results.
{ data: "HRWPER", render: $.fn.dataTable.render.number( ',', '.', 1, '', '%' ) },
{ data: "HRYREG", render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) },
{ data: "HRWNEW", render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) },
↧
How to sort by state of full address?
My data table looks like this picture which is attached.
I wanna sort by STATE but don't want to change address structure.
Is it possible?
↧
How to sort by state of full address?
My data table looks like this picture.
I wanna sort by STATE but don't want to change address structure.
Is it possible?
↧
↧
Table inside td
I had a question. Can datatables work this table :
<table>
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th></th>
<th></th>
<th></th>
<th></th>
<tr>
</thead>
<tbody>
<tr>
<td aria-expanded="false" data-toggle="collapse" data-target="#collapse1" style="cursor: pointer;"><span class="glyphicon glyphicon-chevron-right"></span><span class="glyphicon glyphicon-chevron-down"></span></td>
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
<td><insert button here></td>
<td><insert button here></td>
<td><insert button here></td>
<td><insert form here></td>
<tr>
<tr>
<td></td>
<td colspan="10"><insert table here></td>
<tr>
</tbody>
↧
Hola, algun link donde se pueda ver como se aplica Child rows?
he podido hacer funcionar la opción de prueba de Child rows pero no asi con conexión a la base de datos
↧
Editor: Remove Hover and after change effect
When using the Editor plugin, there are some visual effects that i would like to remove:
1 - when hover on row, the row background changes to orange
2 - when changing a value, the row seems highlighted with an yellow background for a few seconds
Is it possible to remove these effects?
↧
After using scroller.measure(false) recalc info?
Is there a method to recalc the information in the bottom page information display after using scroller.measure(false) ? I don't want to redraw the entire table, simply want to refresh the information of the displayed page after it is remeasured. Currently it does not update until you scroll the page. Thanks
↧
↧
Editor error again even when I have license
I have purchased Editors license, still I am getting Editors error now on one of my machine. It used to work fine on it till few days ago.
Getting following js error
$.fn.dataTable.Editor is not a constructor
while it works fine on one another system
↧
searching datetimes in yyyy-mm-dd and time format using server side processing not working...
Hi, i am coming across some 'funky' behaviour when using jquery tables search box in server side processing mode when it comes to dates. In client side processing i can use the yyyy-mm-dd string in search box and it filters correctly on that date requested. But when i go to server side processing, it doesn't filter correctly. If I put in the yyyy format it works. But if I put in anything after that like yyyy- or yyyy-mm formats etc it finds no records. It seems not to like the hyphen.
The filter uses in my c# code contains:
p.DateTimeSubmitted != null && p.DateTimeSubmitted.ToString().ToLower().Contains(search.ToLower())
In other words I make sure the date is converted to string and then lower case and compare the searchstring lowercase.
What would cause this? No error messages at all- just doesnt come up with any records once anything beyond the year yyyy is put in the search box.
AS mentioned - client processing works fine...
↧
Buttons Print Chrome problem
Hi,
in Chrome (Version 61.0.3163.100 (Official Version) 64 bit), it opens new tab but does not display the print preview, even setting autoPrint: true
Firefox, Safari, Edge and IE are ok apparently.
In this example the same problem occurs when you click Print, open the tab, and display the print preview. After closing the preview and clicking Print again, open the tab but not the preview .: https://datatables.net/extensions/buttons/examples/initialisation/export
↧
Editors custom field saving whole json, not just string
Hey so I am trying to integrate your Editor with typeahead... I'm running into a problem. It seems like the headliner type is being applied to other fields, even though I didn't specify a custom field for them. The Venue and config objects shouldn't have callbacks to the set function, yet I think they are...
Window.editorVals = {}
if (!jQuery.fn.dataTable.ext.editorFields) {
jQuery.fn.dataTable.ext.editorFields = {};
}
var Editor = jQuery.fn.dataTable.Editor;
var _fieldTypes = jQuery.fn.dataTable.ext.editorFields;
_fieldTypes.headliner = {
create: function (conf) {
var that = this;
conf._enabled = true;
// Create the elements to use for the input
conf._input = $(`<div id="${Editor.safeId(conf.id)}">
<input class="typeahead form-control headliner" type="text" placeholder="Headliner / Home Team" style="background-color: unset">
</div>`);
let blood = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'https://apis.dti1ticketapps.com/eventcatalog/headliners/v1?mapped=0&name_contains=',
prepare: function (query, settings) {
settings.url = settings.url + query
settings.headers = {
"x-api-key": _config.apis.dti1ticketapps.eventCatalogToken
};
return settings;
}
},
});
$('input.typeahead.headliner', conf._input).typeahead(null, {
name: 'headliner',
display: Handlebars.compile('{{name}} - {{category_name}}'),
source: blood,
templates: {
empty: [
'<div class="empty-message">',
'Unable to find headliners that match query.',
'</div>'
].join('\n'),
suggestion: Handlebars.compile(
'<div><strong>{{name}}</strong> – {{category_name}}</div>'
)
},
limit: 10
}).on('typeahead:selected typeahead:autocomplete', function (obj, datum) {
$('input.typeahead.headliner.tt-input', conf._input).data({data:datum})
that.set(conf, datum);
});
return conf._input;
},
get: function (conf) {
let val = $('input.typeahead.headliner.tt-input', conf._input).data('data')
return val
},
set: function (conf, val) {
$('input.typeahead.headliner.tt-input', conf._input).typeahead('val', val.name);
}
};
Window.eventCreator.editor = editor = new $.fn.dataTable.Editor({
table: "#eventsTable",
fields: [{
label: "Event Name",
name: "event_name"
}, {
label: "Venue",
name: "venue"
}, {
label: "Config",
name: "config"
}, {
label: "Headliner",
name: "headliner",
type: "headliner"
}, {
label: "Secondary",
name: "secondaryHeadliner",
type: 'headliner'
}, {
label: "Start Date",
name: "date",
}, {
label: "Time",
name: "start_date"
}
]
});
Window.eventCreator.table = table = $('#eventsTable').DataTable({
"processing": true,
dom: "Bfrtip",
scrollY: "30vh",
"orderClasses": false,
scrollCollapse: true,
paging: false,
select: {
style: 'os',
selector: 'tr:not(.success):not(.exists):not(.fail)'
},
buttons: [
{extend: "edit", editor: editor},
],
"columns": [
{"data": "event_name", "title": "Event Name"},
{"data": "venue.name", "title": "Venue"},
{"data": "venue.config_name", "title": "Config"},
{"data": "headliner.name", "title": "Headliner"},
{"data": "secondaryHeadliner.name", "title": "Secondary"},
{"data": "date", "title": "Date"},
{"data": "time", "title": "Time"},
{
"data": "attributes", "title": "Attributes",
"render": function (data, type, row, meta) {
let tagsHtml = ``;
Object.keys(data).forEach(function (key, index) {
tagsHtml += `<span class="badge badge-pill badge-dark">${$(`#${key}`).parent().find('label').text()}</span>`
})
return tagsHtml
}
},
{
"title": 'Delete',
"orderable": false,
"data": null,
"render": function (data, type, row, meta) {
return '<button type="button" class="btn btn-link deleteRow">Delete</button>';
},
"width": 40
}
]
});
table
.on('select', function (e, dt, type, indexes) {
var rowData = table.rows(indexes).data().toArray();
})
.on('deselect', function (e, dt, type, indexes) {
var rowData = table.rows(indexes).data().toArray();
});
$('#eventsTable').on('click', '.deleteRow', function (e) {
e.preventDefault();
table
.row($(this).parents('tr'))
.remove()
.draw();
});
{
"headliner": {
"id": 101380,
"stubhub_id": null,
"name": "Washington Redskins",
"category_id": 1,
"category_name": "NFL"
},
"secondaryHeadliner": {
"id": 101210,
"stubhub_id": null,
"name": "Dallas Cowboys",
"category_id": 1,
"category_name": "NFL"
},
"venue": {
"id": 303754,
"name": "Stadium",
"stubhub_id": null,
"stubhub_config_id": null,
"config_name": "GA",
"city": "Arlington",
"state": "VA",
"country": "US "
},
"config": {
"text": "",
"id": ""
},
"date": "06/15/2018",
"time": "",
"attributes": {
"Is_Date_TBD": true,
"Is_Time_TBD": true
},
"event_name": "",
"DT_RowId": "ba228515-06ad-b868-ee1a-fb94ac2f00c5"
}
why is this behavior happening?
thanks!
↧
↧
optgroup in select2 plugin of datatables editor
Hi,
I just bought DataTables Editor license and I would like to use select2 plugin for multi-select dropdown box. I can't figure out a way to make <optgroup> to work with the plugin. Does anyone know? If so, any sample?
Thank you very much.
Jerry
↧
Editor: Can you do validation on the multi row editing dialog?
How can I prevent a user from submitting the multi value edit window with an empty value for a certain field? Is there a validation callback, or a parameter to pass for the field?
↧
How to set value for a calculated cell without submitting?
Hi.
I have some cells that do not have data in the ajax source. I dynamically calculate and display them through a custom rendering function. I need to update it on the fly while the user is in inline mode and he/she presses a key in a specific field. I tried to use editor.field('field').val('new calculation?') (like in here: https://datatables.net/forums/discussion/46864) But it didn't work.
Actually I don't even have a field initiated, because as I said, it's an on-the-fly value by calculation. I just tried field().val() just to test if things work; as well as table.cells(). But I am stuck here now.
{data: price, render: numberRendering}
{name: 'percentage', data: null, render: customRenderer}
I would like to update the value of percentage cell, without submitting, by just using an event listener like;
$(editor.field('price').input()).on('keypress', function (e, d) {
// What now?
}
↧