How can We use datatable with angularjs with exporting.Please help me
↧
How can We use datatable with angularjs with exporting.Please help me
↧
Source files order
How to implement the module source like DataTables to the html file?Is there any sequence order to implement like(css source then min source and then datatables.min.js)
<link rel="stylesheet" type="text/css" href="../lib/DataTables/media/css/jquery.dataTables.css">
<
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<
script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"</script>
↧
↧
How to check if a variable is an initialized DataTable?
It looks like $.fn.dataTable.isDataTable() works for selectors, but not for variables containing an initialized DataTable. I assumed this function could be used for this purpose, but it is returning false for such variables:
var table = $("#table").DataTable(); // Valid initialized DataTable
console.log($.fn.dataTable.isDataTable("#table")); // Returns true
console.log($.fn.dataTable.isDataTable(table)); // Returns false...why?
Why does this function return false? Is there a way to check variables to see if they are an initialized DataTable? How else can a variable be determined to be an initialized DataTable or not? I'm basically trying to do this:
// variable can be an initialized DataTable, string (selector), or jQuery object...
if (isDataTable(variable)) {
// datatable ... do datatable stuff
} else {
// not a datatable... do other stuff
}
Thanks!
↧
How to filter rows on selected dropdownlist value?
Hey there,
i would like to know if there is any function to filter a datatable that includes columns with dropdownlist elements?
if we have a dropdownlist with values
<select class="form-control selectBoxForCustomData">
<option>Not done</option>
<option>Done</option>
<option>Yes - failed</option>
<option selected="selected">N/A</option>
<option>Checked by DL</option>
<option>-</option>
</select>
and we search all rows that have "Done" selected
-> <option selected="selected">Done</option>
i tried something like
table.column(index).data().search('Done').draw()
but that draws all rows because the option value "Done" is in every row.
How can i do a HTML search on every row?
eg.: search('<option selected="selected">Done</option>').draw()
Another solution could be adding a hidden html data field with the selected value, but i still need to search in the raw HTML data...
<input value="Done" id="item_ProjectCustomData_XY" name="item.ProjectCustomData.XY" type="hidden">
Haven´t found a solution, yet.
↧
How can I get my +- buttons working on all pages?
I have a basic table, but with +- buttons:
<tbody>
@foreach (var item in Model.Stock)
{
<tr>
@Html.HiddenFor(modelItem => item.Id)
@Html.HiddenFor(modelItem => item.StockCode)
@Html.HiddenFor(modelItem => item.AnotherChecked)
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
<button type="button" class="buttonM">⇓</button>
@Html.TextBoxFor(modelItem => item.NewQty, new { id = "newQty", name = "newQtyN", type = "number", min = "0", max = "1000", style = "width:50px" })
<button type="button" class="buttonP">⇑</button>
</td>
<td>
@Html.CheckBoxFor(modelItem => item.Checked, new { id = "checked" })
</td>
</tr>
}
</tbody>
the code that USED (before dataTables) to work fine for +- is
$(".buttonM").on("click", function () {
var myT = document.getElementById('stockTable');
var $row = $(this).parents('tr:first');
var newVal=Number( $row.find('#newQty').val())-1;
if (newVal>=0)
var sel = $row.find('#newQty').val(newVal);
});
$(".buttonP").on("click", function () {
var myT = document.getElementById('stockTable');
var $row = $(this).parents('tr:first');
var newVal = Number( $row.find('#newQty').val())+1 ;
if (newVal >= 0)
var sel = $row.find('#newQty').val(newVal);
});
now it only works on the first page - can anyone point me to the solution?
↧
↧
Datatables only sorts by int with error
I have a datatables set up to read JSON from the server. One of the columns however should be sorted by it's hidden index versus what is displayed on the screen.
This is what I have to display the table:
$("#ad-table").dataTable({
"lengthMenu": [[100, 50, 25], [100, 50, 25]],
"ajax": {
"url": "assessmentsduetable?peid="+peId,
"dataSrc": ""
},
dom: 'Bfrtip',
"buttons": ['print', 'pageLength'],
"order": [[4, "asc"]],
"columns": [
{ "data": "Consumer ID" },
{ "data": "Last Name" },
{
"data": {
_: "WindowNameInfo.WindowDue",
sort: "WindowNameInfo.WindowDueIndex"
}
},
{ "data": "Window End Date" },
{ "data": "Days Left In Window" },
{ "data": "Assessment Name" },
{ "data": "Date of Last Assessment" },
{ "data": "# of Assessments" },
{ "data": "Clinician" },
{ "data": "Clinic" }
]
});
});
The problem is with WindowNameInfo.WindowDue and WindowNameInfo.WindowDueIndex. For some reason, it seems to be sorting on WindowDueIndex as if it were a string even though it is an integer. However, when I do this:
"data": {
_: "WindowNameInfo.WindowDue",
sort: "WindowNameInfo.WindowDueIndex",
type "int"
}
it throws an error, then continues to display the table, this time with it sorting properly!
↧
Color not applying for the next page in pagination.
Hi Guys,
I'm displaying the data around 1000 records and in onload it's displaying the particular color for particular value.
suppose Value A means Blue and Value B means Green and Value C means Red.
I''m finding the td value and having class called .colorChange for that i'm using the jquery like below.
jQuery('.colorChange:contains("A")').css('color', '#2ecc71');
my entire code is like below
jQuery(document).ready(function () { jQuery(function () { jQuery("#myTable").dataTable({ "destroy": true, "dom": '<"pull-left"f><"pull-right"l>tip', "bSortable": true, "aaSorting": true, "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]] }); jQuery('.colorChange:contains("A")').css('color', '#2ecc71'); jQuery('.colorChange:contains("B")').css('color', '#3498db'); jQuery('.colorChange:contains("C")').css('color', '#9b59b6'); jQuery('.colorChange:contains("D")').css('color', '#e74c3c'); }) });<td class="colorChange">
@Html.DisplayFor(modelItem => item.Chemicals)
</td>
Please tell me exactly solution on 2nd page and remaining all also colors not applying on load particular value particular color applying.
Please follow the below urls of those images
1) https://s14.postimg.org/qjm70w8dd/image.png
2) https://s12.postimg.org/vmgiqmxv1/image.png
3) https://s17.postimg.org/c6c2ko2u7/image.png
Please give me a solution for above..
↧
Copy button behavior interrupted when using action option
I am adding the copyHtml5 button to my table, and it all works great until I add the "action" option to my configuration. My goal here is to override the default confirmation message with my own which gets positioned in a shared message container used by my application. Here is the button configuration.
buttons: [{
text: 'Copy Table',
extend: 'copyHtml5',
exportOptions: {
columns: ':visible',
format: {
body: function(innerHtml, col, row) {
var data = oTable.cell(row, col+':visible').data();
data = data === null ? '' : data;
return data;
}
}
},
action: function(e, dt, node, config) {
var row_count = dt.rows().count();
$.setStateMessage('Copied ' + row_count + ' rows to the clipboard', 'green');
}
}],
Again, without the action, the copy function works perfectly. With the action, the custom message is displayed, but nothing is copied to the clipboard. Just the presence of the action with no code inside the function causes the copy to break. Does anyone know why this might be happening? I am using DataTable 1.10.11 and Buttons 1.1.2. Thanks.
↧
Code to autoheader and fill data
/////////////////////php/////////////////////////
$conn = sqlsrv_connect( $serverName, $connectionInfo);
class clasedatos {
var $cabecera;
var $datos;
function add_cabecera( $num) {
$this->cabecera= $num;
}
function add_datos( $valor) {
$this->datos= $valor;
}
}
if( $conn === false )
{
echo "No es posible conectarse al servidor.</br>";
die( print_r( sqlsrv_errors(), true));
$conn = null;
}
else{
$sql =" Params of sql ";
$stmt = sqlsrv_query( $conn, $sql);
if( $stmt === false ) {
die( print_r( sqlsrv_errors(), true));
}
else{
$clase = new clasedatos;
do {
while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
$json[] = $row;
$clase->add_cabecera(array_keys($row));
$clase->add_datos($json);
}
} while ( sqlsrv_next_result($stmt) );
sqlsrv_free_stmt( $stmt);
sqlsrv_close( $conn);
echo json_encode($clase, JSON_NUMERIC_CHECK );
}
}
//javascript
$(document).ready(function() {
var dataJsonCabecera,dataJsonDatos,cabecera,valorDatos;
var cabecera;
var arrCabecera = [];
$.ajax({
type: "GET",
url:"damedatos.php",
data: { },
async: false,
success: function(datos){
var json = JSON.parse(datos);
dataJsonCabecera = eval(json["cabecera"]);
valorDatos = eval(json["datos"]);
for(var i in dataJsonCabecera)
{
if (dataJsonCabecera.hasOwnProperty(i)) {
var cabecera2 = { sTitle:dataJsonCabecera[i],data:dataJsonCabecera[i]};
arrCabecera[i]=cabecera2
}
}
},
error: function (obj, error, objError){
}
});
$('#example').dataTable( {
scrollY: 500,
paging: false,
data: valorDatos,
//data: valorDatos,
dataType: "json",
columns: arrCabecera,
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
}
} );
});
</script>
↧
↧
how can we clear all filter values when one hits the refresh button.
Hi I am using the single column filter option of data-tables. I want to clear all filters once someone hits f5/refresh on the browser.Can someone help me how to do that.Also i am doing server side processing.
↧
Adding +1 day to selectedDate in Editor instance for filtering
I'm filtering a datetime field like below which works great. Yet, is it possible to 'add' +1 day to the selectedDate e.g. in the where condition below?
...
Field::inst( 'date' )
->getFormatter( function ( $val, $data, $opts ) {
return date( 'Y-m-d', strtotime( $val ) );
} )
)
...
// Date Filter
->where( function ($x) {
if ( $_POST["selectedDate"] ) {
$x->where( 'date', $_POST["selectedDate"], '<=' );
}
} )
↧
how can we show all in a select box change
Hi i have the below code for a select box function
$('.search-input-select1').on( 'change', function () { // for select box
var v =$(this).val();
console.log(v);
$.ajax({
type:"post",
url:"user.php",
data:"createdBy="+v,
success:function(data){
var usr = data;
but when the value of v is null/ ' ', i want another particular set of code to be run. How can i do that if condition and where has it to be done - in here or in user.php ?
↧
how can i activate show all in length menu for server-side processing
Hi,
How can the length menu be changed from 10,25,50,100 to 10,25,50,100 and all?#
I am doing serverside processing and i tried the -1 in lengthmenu - no luck.
Please help me
Thanks in advance
↧
↧
how can we clear all filter values when one hits the refresh button.
Hi I am using the single column filter option of data-tables. I want to clear all filters once someone hits f5/refresh on the browser.Can someone help me how to do that.Also i am doing server side processing.
↧
Adding request.GET parameters to server side request
I'm trying to create a page which contains a form for searching the database (for events) as well as a list of the relevant events found.
I'm using server side processing to limit the load on each request but, since the call to the URL for the server side events is a separate HTTP request, the parameters used when someone submits the form aren't passed through to the server so I always get all events, regardless of the filtering done by the form.
The URL of the page (after the search form has been submitted) is:-
/events/?from_date=22%2F09%2F2016
I then create the datatable like this (to try and pass the GET parameters from the search into the server for processing):-
ajax: {
url: "{% url 'event_list' %}",
data: function (d) {
d.filters = "{{ request.GET|safe }}";
}
}
But that doesn't seem to work.
Is there a better way or am I on the right track and just need to make some small adjustment somewhere?
↧
editor.val(val)
When doing (for the sake of example) editor.val(editor.val()), the outer val function will call editor.get() instead of editor.set, because (looking at Editor.prototype.val), the second parameter is undefined.
This can easily be solved by using editor.set(editor.get()) or editor.val(editor.val(), true) for example, but the current examples on the val() don't work.
↧
Export to all file format example i need
Please help me out
↧
↧
Datatables very slow
Hi Allan.
I've already searched the forum for solutions, but unfortunately could not find anything suitable.
For a table, the display takes to be about 10 seconds to display all data records. There are 769 records in the database.
I can not deliver a debug, because the browser 4 times a timeout signals and the data is not stored on your server (loop).
Unfortunately I can not allow access because it is real data in a password-protected system.
Why is the query so slow?
Where can I optimize access?
Rappi
↧
rows.add() with javascript Json
Hello, I'm trying to load data from a javascript generate json object. Unfortunately, nothing happens and data is not loaded.
If the json data is added into a file and used via the ajax call, then the data is loaded just fine.
javascript:
modul='123';
var text='{"data" : [' +
'{"param1":"0.00","param2":"15.00","param3":"0.00","param4":"12"},' +
'{"param1":"0.00","param2":"15.00","param3":"0.00","param4":"12"}]}';
var data = JSON.parse(text);
console.log(jQuery('#'+modul).DataTable().rows.add(data).draw());
I have set the columns definition:
"columns": [
{ "data": "param1"},
{ "data": "param2"},
{ "data": "param3"},
{ "data": "param4"}
],
Working object.txt with: "ajax": "/objects.txt",
{"data":[
{"param1":"0.00","param2":"15.00","param3":"0.00","param4":"12"},
{"param1":"0.00","param2":"15.00","param3":"0.00","param4":"12"}]}
The data is obviously parsed. I got some index mismatches before. All that is resolved..
What am I missing??
Thanks
↧
How do I target "show entries" dropdown
I'm using a datatable and the "show entries" dropdown is set up to show 10, 25, 50, and All entries. I'm trying to target "all" entries in a script, but not sure how since I can't easily manipulate that part of the code. I'd like to target "all entries" on click of a link, but am not sure how. Any assistance would be greatly appreciated.
↧