I want to manipulate an js array after a click but its not triggering.
example is here
https://datatables.net/examples/data_sources/js_array.html
what did i do is: (i need to re set dataset which is loaded into table previously please take a look at above example)
$(document).ready(function() {
$(".retrievemenu").click(function() {
//alert( this.id );
//$('#menus').hide();
var restid = this.id;
data = [
["sasa", "a", "a"]
];
$.post("server.php", {
retrievemenu: 1,
restid: restid
}, function(data) {
console.log(data);
$('#menus').hide();
$('#menus').DataTable({
data: data,
columns: [{
title: "Restaurant Name"
}, {
title: "Menu Name"
}, {
title: "Actions"
}
]
});
$('#menus').show();
});
});
});
Related
Hi I'm currently having trouble with datatable. My datasource is object and I want every first key in the object displayed as value in datatable. Here is my code.
var my_data = {
"content": [
{
"data_v1": [{"id" : 1}]
},
{
"data_v2": [{"id" : 2}]
},
{
"data_v3": [{"id" : 3}]
}
]
};
$(document).ready(function() {
$('#example').DataTable( {
data:my_data,
columns: [
{ data: 'content'
}
]
} );
} );
What output I expect is this.
| Content |
-------------
data_v1
data_v2
data_v3
Note: As long as posible, I don't want to use forloop or any kind of loop. TIA
Any help will be so much appreciated.
Try
var myData = {
"content": [
{
"data_v1": [{"id" : 1}]
},
{
"data_v2": [{"id" : 2}]
},
{
"data_v3": [{"id" : 3}]
}
]
};
$(document).ready(function()
{
$('#example').DataTable( {
data: Object.keys(myData["content"]),
columns: [
{ title: 'content'
}
]
});
});
Object.keys will return an array of keys from the data provided
This answer is from #colin of Datatable.
$(document).ready(function() {
var my_data = {
"contents": [{
"data_v1": [{
"id": 1
}]
},
{
"data_v2": [{
"id": 2
}]
},
{
"data_v3": [{
"id": 3
}]
}
]
};
var table = $('#example').DataTable({
data: my_data.contents,
columnDefs: [{
targets: 0,
render: function(data, type, row, meta) {
return (Object.keys(row)[0]);
}
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="example"></table>
I have an variable array called data, for IGcombobox datasource, I want to change the array when I click my #select, how can I do that? With this code it doesn't change the variable. Also I could just use php, but I dont want to do that!
<div id="checkboxSelectCombo" name="kanal" style="position:absolute;" ></div>
<select id="seade" name="seade">
<?php for($i = 1; $i <= $devi; $i++) {
echo '<option value="' . $i . '">' .$device_name[$i]. '</option>';
} ?>
</select>
$(function () {
var data = [
{ ID: "1", Name: "Vooluandur 1" },
{ ID: "2", Name: "Meeter 1" }
];
$("#seade").on('click', function(event) {
console.log($("#seade").val());
if ($("#seade").val() == 2) {
var data = [
{ ID: "3", Name: "Vooluandur 2" },
{ ID: "4", Name: "Meeter 2" }
];
}
});
$("#checkboxSelectCombo").igCombo({
width: "100px",
dataSource: data,
textKey: "Name",
valueKey: "ID",
multiSelection: {
enabled: true,
showCheckboxes: true
}
});
});
You could try this: (didn't run it though)
$("#seade").on('change', function(event) {
if (this.value == 2) {
data = [
{ ID: "3", Name: "Vooluandur 2" },
{ ID: "4", Name: "Meeter 2" }
];
}
});
Had found something to refresh the datasource hope it will work
where you update your "data" variable below that put this line
$("#checkboxSelectCombo").igCombo("option", "dataSource", data);
This should change the dataSource and rebind the combo.
I found a solution, since changing data variable doesn't affect igCombo datasource, I can just change datasouce variable like this
var data2 = [{
ID: "3",
Name: "Vooluandur 2"
},
{
ID: "4",
Name: "Meeter 2"
}
];
$("#seade").on('change', function(event) {
if (this.value == 2) {
$("#checkboxSelectCombo").igCombo({
dataSource: data2,
textKey: "Name",
valueKey: "ID",
});
}
});
Documentation source: http://www.igniteui.com/help/igcombo-data-binding
I'm having a issue that I dont know how to afford. I have a kendo grid which is being poblated with a json file.
The issue is that in the json file there is a field that has a different type in different elements.
I'll explain myself with an example:
"listaPreguntas": [
{
"idPregunta": 1126,
"idTipificacion": 1712,
"tipoPregunta": "E",
"pregunta": "¿DE QUE COLOR ES?",
"numeroOrden": 2,
"respuestasPosibles": [
{
"idRespuestaPosible": 1066,
"respuestaPosible": "HOSPITAL"
},
{
"idRespuestaPosible": 1068,
"respuestaPosible": "AMBULATORIO"
},
{
"idRespuestaPosible": 1070,
"respuestaPosible": "CENTRO SALUD"
},
{
"idRespuestaPosible": 1072,
"respuestaPosible": "UNIDAD MOVIL"
},
{
"idRespuestaPosible": 1074,
"respuestaPosible": "UNIDAD DONACION"
},
{
"idRespuestaPosible": 1076,
"respuestaPosible": "UNIDAD MOVIL (UVI)"
}
],
"idTipoEnumerado": 1
},
{
"idPregunta": 1150,
"idTipificacion": 1712,
"tipoPregunta": "T",
"pregunta": "¿cuantas personas?",
"numeroOrden": 1,
"respuestasPosibles": null,
"idTipoEnumerado": 0
},
{
"idPregunta": 1152,
"idTipificacion": 1712,
"tipoPregunta": "F",
"pregunta": "¿Mayores?",
"numeroOrden": 3,
"respuestasPosibles": null,
"idTipoEnumerado": 0
}
You can see three objects in the json file, the first object has a type "E" and has six possible values, the second object has a type "T" (Text) and the last one is a boolean.
What i need is to show in the grid a column which type change depending on the type of the json. I need to have a text value in some cases, a checkbox and a dropdownbox.
I hope you could understand me.
Thanks in advance.
Here is example for custom editor from http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editor
$("#grid").kendoGrid({
columns: [ {
field: "name",
editor: function(container, options) {
var input = $("<input/>");
input.attr("name", options.field);
input.appendTo(container);
if(options.model.tipoPregunta == 'E')
{
input.kendoDropDownList( ... );
}
if(options.model.tipoPregunta == 'T')
{
....
}
if(options.model.tipoPregunta == 'F')
{
....
}
}
} ],
editable: true,
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
options.model is a row dataItem
You just need to create a template for your column in your grid config:
columns: [{
field: "respuestasPosibles",
template: function(e){
if ( (e.tipoPregunta === 'E') && $.isArray(e.respuestasPosibles) ){
var st = '';
$.each(e.respuestasPosibles, function(i, a){
st += a.respuestaPosible + '(' + a.idRespuestaPosible + ')<br>';
});
return st;
}
else{
// The cell will be empty
return '-';
}
}, ....
]
I am using datatables jQuery plugin to show the data nicely withing a table. I am making an ajax request on a click of a button which is then running a php script returning a JSON.
Here's how my code:
$('#searchInSugar').button().on('click', function (e) {
var searchTxt = $('#searchEntry').val();
var moduleName = $('#moduleSelect').val();
if (!searchTxt.trim() || searchTxt.length === 0) {
alert("Please provide some search text string..");
return false;
}
if (moduleName === "select") {
alert("Please select a module..");
return false;
}
$.ajax({
type: 'POST',
url: "fetch_records.php",
data: {"searchText": searchTxt,
"module": moduleName},
success: function (data) {
obj = JSON.parse(data);
$(document).ready(function () {
$('#dialog_entry_table').DataTable({
"info": false,
data: data,
columns: [
{"records": "id"},
{"records": "name"},
{"records": "account_name"}
]
});
});
},
error: function (exception) {
alert('Exeption:' + exception);
}
});
});
Here's the json that I get from the php script.
{
"next_offset":-1,
"records":[
{
"id":"a54e81f8-72b2-ae9b-d526-5608761a28e8",
"name":"Mr. James Smith",
"date_modified":"2015-09-27T23:52:29+00:00",
"account_name":"",
"_acl":{
"fields":{
}
},
"_module":"Contacts"
},
{
"id":"b8ec2e0a-ade1-f70f-d722-56098e5c4370",
"name":"james bond",
"date_modified":"2015-09-28T22:50:56+00:00",
"account_name":"",
"_acl":{
"fields":{
}
},
"_module":"Contacts"
},
{
"id":"4de93888-155c-7e59-9c4b-56058f1b7ce9",
"name":"Mr. James Bond",
"date_modified":"2015-09-28T01:50:49+00:00",
"account_name":"OSSG",
"_acl":{
"fields":{
}
},
"_module":"Contacts"
}
]
}
Now, I ONLY WANT TO SHOW id, name and account_name IN THE TABLE, But I am having a hard time achieving this, could someone help/advise what I am doing wrong here.
This is the error I am getting:
Try:
var dt = [];
$.each(data.records,function(i,v) {
dt.push([v.id,v.name,v.account_name]);
});
$('#dialog_entry_table').DataTable({
"info": false,
data: dt,
columns: [
{"title": "id"},
{"title": "name"},
{"title": "account_name"}
]
});
jsfiddle: https://jsfiddle.net/bwqfq2gr/1/
Okay, so I have two observable datasources. One uses a model called TestRequest, of which I can have multiples. The other uses a model of TestResult of which multiples can exist for each TestRequest. I have a requestId data item that I am filtering on to populate my dependent grid. With declarative data and a declarative filter everything works fine. If I dynamically set the filter, I can no longer add new records to the filtered datasource. How can I get around this? I was going to set the "foreign" id in a handler on the data source's change event (this is how I maintain client side primary keys just fine). And I can I can tell from my handler that the "add" action is firing, but the editor popup (I am using popup editing on both grids) is not showing? Is there some other magic I need to enable?
Let me know if I need to post code and I will put my html and js up on a server for y'all to look at and criticize :)
Thanks in advance.
Relevant JavaScript:
var TestRequest = kendo.data.Model.define({
id: "Id",
fields: {
"accessionNumber": { type: "string" },
"specimenCollectionDate": { type: "date" },
"specimenReceivedDate": { type: "date" },
"resultReportDate": { type: "date" },
"testDescription": { type: "string" },
"relevantClincalInfo": { type: "string" },
"specimenSource": { type: "string" },
"resultStatus": { type: "string" },
"reasonForTest": { type: "string" },
"comments": { type: "string" }
}
});
var testRequestDataSource = new kendo.data.DataSource({
schema: {
model: TestRequest
}
});
testRequestDataSource.bind("change", function(e) {
if (e.action === "add") {
e.items[0].dirty = true;
kendo.data.ObservableObject.fn.set.call(e.items[0], "Id", viewModel.testsResults.nextRequestId);
viewModel.testsResults.nextRequestId++;
}
});
var TestResult = kendo.data.Model.define({
id: "Id",
fields: {
"requestId": {
type: "number",
editable: false
},
"foo": {
type: "string"
}
}
});
var testResultDataSource = new kendo.data.DataSource({
data: [
{
Id: 1,
requestId: 1,
foo: "bar"
},
{
Id: 2,
requestId: 1,
foo: "baz"
},
{
Id: 3,
requestId: 2,
foo: "beep"
}
],
schema: {
model: TestResult
},
filter: {
"field": "requestId",
"operator": "eq",
"value": 0
}
});
testResultDataSource.bind("change", function(e){
if (e.action === "add") {
e.items[0].dirty = true;
kendo.data.ObservableObject.fn.set.call(e.items[0], "Id", viewModel.testsResults.nextResulttId);
viewModel.testsResults.nextResultId++;
}
});
var viewModel = kendo.observable({
...
testsResults: {
nextRequestId: 1,
nextResultId: 4,
testRequests: testRequestDataSource,
testResults: testResultDataSource,
testRequestChange: function() {
var selectedItems =testRequestGrid.select();
var selectedRow = $(selectedItems[0]);
var selectedUid = selectedRow.data("uid");
var selectedData = testRequestGrid.dataSource.getByUid(selectedUid);
var requestId = selectedData.id;
this.testsResults.testResults.filter({
"field":"requestId",
"operator":"eq",
"value": requestId
});
},
testRequestEdited: function(e) {
var uid = e.model.uid;
// TODO: fix below code to use callback or better event
setTimeout(function() {
testRequestGrid.select(testRequestGrid.tbody.find(">tr[data-uid='"+uid+"']"));
}, 100);
},
....
....
The HTML:
<div id="testsResults">
<h2>Tests/Results</h2>
<fieldset>
<legend>Test Requests</legend>
<div id="testRequests">
<div data-role="grid"
data-bind="source: testsResults.testRequests, events: { change: testsResults.testRequestChange, save: testsResults.testRequestEdited }"
data-editable="popup"
data-selectable="true"
data-toolbar='["create"]'
data-columns='[{"field":"accessionNumber","title":"Accession #"},
{"field":"specimenCollectionDate", "title":"Specimen Collection Date", "hidden":"true"},
{"field":"specimenReceivedDate", "title":"Specimen Received Date", "hidden":"true"},
{"field":"resultReportDate", "title":"Result Report Date", "hidden":"true"},
{"field":"testDescription","title":"Test Description"},
{"field":"relevantClinicalInfo", "title":"Relevant Clinical Information", "hidden":"true"},
{"field":"specimenSource","title":"Specimen Source", "hidden":"true"},
{"field":"resultStatus","title":"Result Status","hidden":"true"},
{"field":"reasonForTest","title":"Reason For Test", "hidden":"true"},
{"field":"comments","title":"Comments","hidden":"true"},
{"command":["edit","destroy"], "title":" ", "width":"170px"}]'>
</div>
</div>
</fieldset>
<fieldset>
<legend>Test Results</legend>
<div id="testResults">
<div data-role="grid"
data-bind="source: testsResults.testResults"
data-editable="popup"
data-selectable="true"
data-toolbar='["create"]'
data-columns='[{"field":"requestId","title": "Test Request ID", "hidden":"true"},
{"field":"foo", "title":"Foo"},
{"command":["edit","destroy"], "title":" ", "width":"170px"}]'>
</div>
</div>
</fieldset>
</div>
Yay! I get to answer my own question. The problem is that the new record does NOT match the filter, so the edit popup cannot display. I added the missing piece in the change event handler of the data source and everything works nifty:
testResultDataSource.bind("change", function(e){
if (e.action === "add") {
e.items[0].dirty = true;
kendo.data.ObservableObject.fn.set.call(e.items[0], "Id", viewModel.testsResults.nextResulttId);
var filters = this.filter().filters;
var requestId = filters[0].value;
kendo.data.ObservableObject.fn.set.call(e.items[0], "requestId", requestId);
viewModel.testsResults.nextResultId++;
}
});