Can I use GET method in datatable serverside processing? I want to use GET instead of POST method.
Thanks,
Mack
↧
GET data in datatable serverside processing
↧
Columns.Render - Accessing data for more than 1 column in the render function
Hi all,
I am using datatables with server side rendering and my render function is as follows for a column in my table :
{
"data": "Errors",
"width": "5%",
"orderable": false,
"render":
function (data, type, row) {
var myUrl = '@Url.Action("Foo", "Bar")/' + data;
return '<a href=\"' + myUrl + '\">'+data+'</a>';
}
}
What I need to do is display the value for the data (which is the errors colum) in my link but pass the value of another column (id) as the parameter when the url is clicked. So for the line var myUrl = '@Url.Action("Foo", "Bar")/' + data; I would like to pass the value of the 'Id' column as data. Is there any way to do this ?
Thanks
↧
↧
Can I move the search box to the left?
Hi,
Using the Bootstrap styling...
Can I move the search box to the left?
And once I do that, can I remove the word "Search" and the colon?
And once I do that, maybe add placeholder text inside the box?
Thanks!
↧
DeferredLoading not behaving
I'm experiencing issues with the deferLoading-option and Ajax. First, my init-code:
var datatable = $('#table').dataTable({
ajax: {
url: 'my/url/'
},
columns: [
{ data: 'firstname' },
{ data: 'lastname' },
{ data: 'ip', type: 'ip' },
{ data: 'button', orderable: false}
],
order: [[0, 'asc'], [1, 'asc'], [2, 'asc']],
deferLoading: 0,
processing: true
});
My table is initially drawn with a set of rows. With deferLoading set to 0, these rows are preserved on pageload. However, because I set this option, I'm also expecting datatables NOT to call the ajax-url on pageload (at least this is what the docs indicate). But a request is still sent to the url and the response content is merged into the existing dataset, doubling everything up. I can't imagine this is how it's supposed to work. Or is it? Am I doings something wrong?
Note: I also tried setting deferLoading to different values, but I got the same result.
Any pointers would be appreciated immensely.
Thank you.
↧
Search w/ a List
Hello, when a user selects multiple values on my visualization, I would like to redraw my DataTable and display the rows that equate to those values. My function is similar to:
`// clicked function
function clicked(d) {
var table = $('#table').DataTable();
table
.columns(0) //column to search on
.search(d.County) // search Counties
.draw();
}`
Where d.County is a list of values. It looks like the DataTable is only displaying 1 value at a time and not the entire list. Could anyone guide me in the right direction?
↧
↧
how i can add combo box filter
how i can add combo box filter on change event of combo for particular Column
↧
Currency column automatically rounding to the nearest dollar
I have been searching for a while now and can't find where to fix this. I have 2 columns in editor that hold currency but every time I enter a dollar amount with decimals it rounds to the full dollar. I need it to do that at the penny level or not at all. I am sure it is just a setting somewhere but can't find it. Can someone please point me in the right direction. Thanks.
↧
Bug: originalEvent is lost when turning a page using KeyTable
When the current page changes as the result of using the arrow keys with KeyTable, the originalEvent of the key-focus event is lost.
Expected behavior: the originalEvent argument is a jQuery event object.
Actual behavior: the originalEvent argument is null
http://live.datatables.net/rexereni/1/edit?js,console,output
- Select any cell
- Press the down arrow key until the end of the page is reached
- Press the down arrow key once more to turn the page
- Error in the console!
↧
Inline editor with selectize validtion
Hi,
I have my editor configured like this with validation on PreSubmit. However the problem is that editor.field( "ProjectId" ) is always empty when performing the validation checks.
How can I validate a selectize DDL with inline editing?
editor = new $.fn.dataTable.Editor({
ajax: {
type: "POST", url: "/WorkDiary/SaveDetail",dataType: "json",contentType: "application/json",processData: "false",
data: function(d) {return JSON.stringify(d);}
},
table: "#detailTable",
idSrc: "Id",
fields: [
{ label: "Id:", name: "Id", type: "readonly" },
{ label: "WorkDiaryId:", name: "WorkDiaryId", type: "readonly" },
{ label: "Time:", name: "WorkTime", type: "readonly" },
{ label: "Activity:", name: "Activity", type: "textarea" },
{
label: "Project",
name: "ProjectId",
type: "selectize",
opts: {
valueField: "Id",
labelField: "Name",
searchField: "Name",
preload: true,
maxItems: 1,
load: function(query, callback) {
$.ajax({
url: "/SelectHelper/GetProjectList",
type: "GET",
dataType: "json",
data: { q: query },
error: function() { callback(); },
success: function(res) { callback(res); }
});
}
}
},
{ label: "DateCreated:", name: "DateCreated", type: "readonly" },
{ label: "CreatedBy:", name: "CreatedBy", type: "readonly" }
],
formOptions: { inline: { onBlur: "submit", submit: "all" } },
i18n: { edit: { title: "Diary Form" } }
});
editor.on( "preSubmit", function ( e, d, action ) {
if ( action !== "remove" ) {
var projectId = editor.field( "ProjectId" );
if ( !projectId.isMultiValue() ) {
if ( !projectId.val() || projectId.val() === 0 )
projectId.error("You must select a project");
}
if ( this.inError() ) {
return false;
}
}
↧
↧
DataTable doesn't display total no. of rows
DataTable doesn't display total no. of rows after delete any row to reinitialize same table.
Can u pls reply me.
↧
how to display calendar icon with masked datetimepicker input
I used Malor's datetimepicker (malot.fr/bootstrap-datetimepicker/index.php) and Bootstrap 3.
With method Bootstrap DateTimePicker (1) https://editor.datatables.net/plug-ins/field-type/editor.datetimepicker I can integrate my datetimepicker into popup editor to change this code:
conf._input = $('<input/>')
.attr( $.extend( {
id: conf.id,
type: 'text',
'class': 'datetimepicker'
}, conf.attr || {} ) )
.datetimepicker( $.extend( {}, conf.opts ) );
to this one:
conf._input =
$('<input/>')
.attr( $.extend( {
id: conf.id,
type: 'text',
'class': 'datetimepicker'
}, conf.attr || {} ) )
.mask('0000-00-00', {placeholder: '____-__-__'})
.datetimepicker( $.extend( {}, conf.opts ) );
It works fine BUT there is no calendar icon at the end of date time's input element.
Normally a field definition looks like this, the span element is the key:
<div class="col-lg-3">
<div class="form-group">
<label for="kelt" class="control-label">Kelt</label>
<div class="input-group date" id="keltpicker">
<input id="kelt" name="kelt" type="text" data-type="date" class="form-control"
value="{$today}" onchange="updHatido(true)"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
and some postscript to define datetimepicker and mask:
$('#keltpicker').datetimepicker({
startView: 'month',
minView: 'month',
maxView: 'month',
viewSelect: 'month',
format: 'yyyy-mm-dd',
language: 'hu',
autoclose: true,
weekStart: 1,
});
$('#kelt').mask('0000-00-00', {placeholder: '____-__-__'});
My solution is in modified plugin code:
var inp = $('<input/>')
.attr( $.extend( {
id: conf.id,
type: 'text',
'class': 'datetimepicker'
}, conf.attr || {} ) )
.mask('0000-00-00', {placeholder: '____-__-__'});
var icon = $('<span/>').attr({class: 'input-group-addon'})
.append($('<span/>').attr({class: 'glyphicon glyphicon-calendar'}));
conf._input = $('<div/>').attr({class: 'input-group date'}).append(inp,icon)
.datetimepicker( $.extend( {}, conf.opts ) );
This generates similar code like my example, and calendar popup is appear by clicking on both icon or input field, but there are two problems:
- clicking on Ok button the sent form data contains always not the set date.
- open date popup and press esc the popup calendar does not disappear.
Is there any example how to make this complex element on editor popup windows?
Best Regards
Peter
↧
is "https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" is having any dependency???
i am getting error(Uncaught TypeError: undefined is not a function ) on this line "register=p=function(a,b){if(h.isArray(a))for(var " .
referening is not a function.
support me with the possible solution.
↧
Set new value with dependent() is not working
hi together,
i try to update a value in database,
if the value in a field "main_menu" is by "1" the field "sub_menu" need the value "0".
I think about a code like this:
editor.dependent( 'main_menu', function ( val ) {
if (val == '1') {
editor.field( 'sub_menu').val("0");
}
});
whatever i try to set the value doesnt work. maybe i can get help here?
Thanks
Ronny
↧
↧
KeyTable does not set activeElement
I was surprised to find out that KeyTable does not set focus to its selected cell. In other words: document.activeElement is not the selected <td>. In my case the active element is set to the <body> of the page when I select a cell.
Is there a reason why it is this way?
I'm asking because I want to attach keydown handlers to selected cells for keys that are also handled by KeyTable itself. The keys event is not triggered in this case.
↧
Responsive doesn't work
I have a DT loading data via AJAX.
Responsive plugin it loaded, but fails to resize the table after loading the data, meaning a column at the end has "squished" content (couple of buttons that should sit horizontally, but display vertically, as there is not enough space)
However, if I resize my browser (Chrome) the responsiveness kicks in.
Sometimes I can go back to maximising the window and the last column will stay hidden in the responsive container, sometimes it doesn't and displays brokenly again.
Table tag
<table class="table table-striped dt-responsive nowrap compact" id="users" width="100%">
jQuery
$('#users').DataTable( {
"ajax": "<?php echo site_url('admin/users/get_users')?>",
"responsive": true,
"deferRender": true,
...
});
Screenshot attached showing last column issue (buttons are in a Bootstrap button group, so should sit horizontally next to each other) and also how it should look.
↧
Custom dom button generation
I'm trying to generate a custom dom button, like:
<button class="btn">Export</button>
It's possible?
I've tried various configurations with dom parameter, but I don't get any different response:
$.fn.dataTable.Buttons(dataTable, {
buttons: [
{
extend: 'pdf',
text: 'Export',
dom: {
button: {
tag: 'button',
className: 'btn'
}
}
}
]
});
Always I get response with a tag, and in a not wanted div container:
<div class="dt-buttons">
<a class="dt-button buttons-pdf buttons-html5" tabindex="0" aria-controls="datatable-1" href="#"><span>Export</span></a>
</div>
Thanks,
Albert
↧
How to force a page refresh upon adding a new row to an Editor table?
Hello,
Is it possible to force a page refresh upon adding a new row or editing an existing row in a DataTable? Similar to what a "Submit" button does in plain old html form.
I searched the forums, but couldn't find any relevant responses. It appears to me ajax.reload() refreshes the particular datatable only.
Thanks
Harsha
↧
↧
Source documentation bug
In Database/Database.php, the documentation for the method raw() says it will return Result, but that should be Query.
↧
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' );
}
});
}
}]
↧
Set focus to the Search Box
Hello, I searched the entire forum and although I found information, I can not understand where the code is placed to focus the search box. (Sorry for my English) Here my code:
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
this.api().columns([1]).every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.header()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
} );
Thank you.
↧