RailsCasts episode 340 on DataTables was interesting, but with the release of DataTables v1.10, lots have changed. Ajax is simpler but API's are easier to configure. Does anyone have examples of Rails code that creates Ajax data for DataTables? It'll be useful if it can be used for sorting, searching, in addition to pagination.
Yes, it is very useful for sorting ,searching and also pagination both for client side as well as serverside but not at the same time.
It is a very good plugin(gem), I have used it.
Example:-Ajax data for datatable
var table = $("#example_id").DataTable({
iDisplayLength: 100,
bInfo: false,
bSort: true,
sPaginationType: "full_numbers",
bStateSave: true,
bDestroy: true,
bProcessing: true,
bServerSide: true,
bFilter: false,
sAjaxSource: '/example/action_name',
fnServerParams: function (aoData) {
aoData.push(
{ "name": "example1", "value": $("#_example1").val() },
{ "name": "example2", "value": 5 },
{ "name": "example3", "value": "My Name" }
);
},
oLanguage:{
sZeroRecords: "No records found."},
"sDom": 'rtlfip'
});
Hope this will help you!!
Related
I have integrated universal printer in my App(outsystems) using Microsoft graph APIs, it's working as expected except pageRanges, for example I have document containing 5 pages and I want to print 3rd and 4th page only but it is printing all 5 pages every time.
Following is the JSON representation of the request
{
"configuration": {
"quality": "medium",
"dpi": 600,
"duplexMode": "oneSided",
"copies": 1,
"colorMode": "auto",
"mediaSize": "A4",
"collate": true,
"feedOrientation": "longEdgeFirst",
"fitPdfToPage": false,
"inputBin": "tray-1",
"orientation": "portrait",
"pageRanges": [
{
"start": 3,
"end": 4
}
],
"pagesPerSheet": 1,
"scaling": "none"
}
}
I have some geojson grids that map through to some annualised sales data over a period of 25 years. I am really struggling to filter this sales data by year to show the trends in a chloropleth map.
d3 = require('d3-dsv');
map_json = FileAttachment("Time_line#2.geojson").json()
sales_data = FileAttachment("Timeline_test#1.csv").csv()
vegalite = require('#observablehq/vega-lite')
vegalite ({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 600,
"height": 350,
"data": {
"name": "mapdata",
"values": map_json,
"format": {"property": "features"},
},
"params": [{
"name" : "AnnualPeriod",
"value": 1995,
"bind" : {"input": "range", "min":1995, "max":2020,"step":1 }
}],
"transform" : [{
"lookup": "properties.id",
"from": {
"data": { "values": sales_data,},
"format":"csv",
"key": "derived_boundary_id",
"fields": ["sales_volume"],
},
},],
"layer": [
{
"mark": "geoshape",
"encoding": {
"color": {
"field": "sales_volume",
"type": "quantitative",
"scale": {"scheme": "Oranges"},
},
"stroke": { "value": "#ff75"},
},
},
]
})
I have tried to add transform.filter and cannot get it to work. At the moment it appears to be taking the first sales_data record for each of the boundary_ids.
I would like the data to be filtered according to the setting of the AnnualPeriod slider.
I think I need to include something like
"transform" :[{"filter": "datum.year == AnnualPeriod"}]
I have tried it in the transform section, with the lookup between the sales_data and the geojosn objects.
I have also tried to filter in and around the geoshape mark but neither work.
Does anyone have any ideas?
The is a sample of the sales_data:
sales_volume,year,derived_boundary_id
5,2015,602212
2,2016,602212
2,2019,602212
5,1995,602213
7,1996,602213
6,1997,602213
7,1998,602213
9,1999,602213
10,2000,602213
7,2001,602213
5,2002,602213
5,2003,602213
9,2004,602213
5,2005,602213
...
where the last column maps to an "id" in the geojson data.
and this is the 'map' that I get. Always the same, irrespective of the slider setting.
I have eventually worked out how to get this to work.
Create the main data source as the sales data and attach the maps/geojson to this via a transform/lookup.
It seems so simple now, but I thought I would post the result so others can see how it can be achieved.
These observations may help others:
The transform can take the "year" filter as well as the map_json lookup.
The map/json lookup is referenced as "geo" to make it easier to understand
The geoshape mark then references, via the encoding, this geojson "geo" object.
Thanks to Mike Bostock and the Observable and Vega-Lite team for their excellent work.
vegalite ({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 600,
"height": 600,
"data": {
"values": sales_data,
},
"params": [{
"name" : "AnnualPeriod",
"value": 1995,
"bind" : {"input": "range", "min":1995, "max":2020,"step":1 }
}],
"transform" : [
{"filter" : "year(datum.year) === AnnualPeriod"},
{
"lookup": "derived_boundary_id",
"from" : {
"data": {
"values": map_json,
"format": {"property": "features"},
},
"key":"properties.id",
},
"as":"geo",
}
],
"mark":"geoshape",
"encoding": {
"shape": {
"field":"geo",
"type":"geojson",
},
"color":{
"field":"sales_volume",
"type":"quantitative",
"scale": {
"scheme":"Oranges",
"domain": [0,15],
},
}
}
})
How's your progress? I am not familiar with Choropleths, but by comparing with the Vega Examples, I spot 2 differences you may wanna take a look:
Choropleth needs a projection
Map data should be placed in lookup transform, and sale data in normal data. Ref 1 Ref 2
Do feel free to correct me if I am wrong. If you need more help, please share an editor with dummy data because I found it hard to make good use of the sale data you provided :'(
I am using jquery datatable in asp.net mvc and i want to show a submit button which will be saving the data to the database only if there is atleast one row in the datatable.
I am trying this code, however its not working
<tr id="trbtnSubmit">
<td colspan="9" align="center">
<input type="submit" name="btnSubmit" value="Save"
class="btn btn-edit btn-text" />
</td>
</tr>
<script>
var PopUp, dataTable;
$(document).ready(function () {
dataTable = $("#tblCustomerList").DataTable({
"ajax": {
"url": "/Customer/GetCustomers",
"type": "GET",
"data": "json"
},
"lengthChange": false,
"pageLength": 10,
"columns": [
{ "data": "Number" },
{ "data": "Name" },
{ "data": "fileName" },
{ "data": "mD5Hash" },
{ "data": "dataSizeInGB" },
{
"data": "Id",
"render": function () {
return "<a href='#'><i class='fa fa-eye'></a></i><a href='#' style='margin-left:5px'><i class='fa fa-pencil'></i></a><a href='#' style='margin-left:5px'><i class='fa fa-trash'></a></i>";
},
"orderable": false,
"width": "40px"
},
],
"language": {
"emptyTable": "No Customers , click on <b>New Customer</b> to add Customers"
}
});
var table = $('#tblCustomerList').DataTable();
if (!table.data().any()) {
$('#trbtnSubmit').hide();
} else {
$('#trbtnSubmit').show();
}
});
</script>
Since you didn't specify the version of datatables, I assume it's v1.10.
And there are 2 side notes I want to make before going into your problem:
Difference between .datatable() and .DataTable()
Enable server-side processing
Difference Between .datatable() and .DataTable()
I saw you declared another variable, var table, at the bottom of your sample code to get another instance of DataTables and check if there is any data? You actually don't need to.
.DataTable() returns a DataTables API instance, while .datatable() returns a jQuery object.
So if you intent to make usages on the DataTables APIs after you initialize the table, you can just use the varirable you declared from the beginning, var dataTable since you used .DataTable() way.
Enable Server-side Processing
Server-side processing is enabled by turning on the serverSide option, and configuring the ajax option. You're missing the first one, whose default is false.
So you might need to add serverSide option in your code:
dataTable = $("#tblCustomerList").DataTable({
serverSide: true,
ajax: {
...
},
...
});
Enough said. Now looking at your problem ...
DataTables Callbacks
There are many ways to achieve what you want to do, and I like to use callbacks so that you can configure your DataTables in one place.
There are lots of callbacks you can use, and the one I would use is drawCallback:
dataTable = $("#tblCustomerList").DataTable({
serverSide: true,
...,
language: {
emptyTable: "No Customers , click on <b>New Customer</b> to add Customers"
},
drawCallback: function(settings) {
$('#trbtnSubmit').toggle(settings.aoData.length > 0);
}
});
Hopefully my code is readable enough without any additional explanations :)
So I've been looking into the surveymonkey v3 api documentation for formatting questions types. What I want to do is create a multiple choice question that has an "other" option, which if selected has a text field that a user can fill in to be more specific. Is there a way to accomplish this with the api?
You should be able to do that when creating/updating a question.
Example:
POST /v3/surveys/<id>/pages/<id>/questions
{
"family": "single_choice",
"subtype": "vertical",
"answers": {
"other": [{
"text": "Other (please specify)",
"is_answer_choice": true,
"num_lines": 1,
"num_chars": 50
}],
"choices": [
{
"text": "Apples"
},
{
"text": "Oranges"
},
{
"text": "Bananas"
}
]
},
"headings": [
{
"heading": "What is your favourite fruit?"
}
]
}
This is_answer_choice field seems to not be accepted currently. That is a bug, you can watch the docs to potentially get notified on updates, or try it again later.
Edit: This method should work now, give it a try and let me know if it solves your problem!
I have a ASP.NET MVC 4.0 project using JsTree. The JsTree is being populated thought a model that returns a JSON.
Now my problem is this, i have a huge tree that makes the user experience pretty bad. What i need is to load a few items (let'say 20), and have a button that when clicked by the user add's the next 20 records to the tree.
I have been searching in Google JsTree documentation and SO, but i haven't found a example that works for me.
Can anyone help me?
Thanks in advanced.
Ok, some break trought. I kind of got this working. In my view the user input call this function:
function getNextRecords() {
var new_data = { "attr": { "ID": "999999999999", "NodeText": "999999999999" },
"data": "999999999999",
"children": [{
"attr": { "ID": "ACT99", "NodeText": "969994222" },
"data": "969994222 - PPP",
"children": [{
"attr": { "ID": "TRFps800", "rel": "disabled" },
"data": "Voz com unlimited 800 fidelização até 01/11/2019",
"state": "open"
}],
"state": "open"
}], "state": "open"
};
var retDom = $.jstree._reference("#demoTree")._parse_json(new_data, -1, true);
$("#demoTree").jstree("move_node", retDom, -1, "inside", false, false, true);
}
This is working fine, expect that the parse json creates a "ul" instead of a "li" any ideas in how to change that?
OK, i finally got this working, this is the final version of my Function i hope this helps someone.
function getNextRecords() {
var new_data = { "attr": { "ID": "999999999999", "NodeText": "999999999999" },
"data": "999999999999",
"children": [{
"attr": { "ID": "ACT99", "NodeText": "969994222" },
"data": "969994222 - PPP",
"children": [{
"attr": { "ID": "TRFps800", "rel": "disabled" },
"data": "Voz com unlimited 800 fidelização até 01/11/2019",
"state": "open"
}], "state": "open"
}], "state": "open"
};
var ref = $("li ul:first")
var retDom = $.jstree._reference("#demoTree")._parse_json(new_data, ref, true);
$("#demoTree").jstree("move_node", retDom, ref, "first", false, false, true);
}
This add a new child after the first UL.
The second part "load part of the branch and with another load of the same branch
load more" is exactly what i'm trying to do but i have not yet succeeded, is it
possible to have an example?
Such task must be taken care of on server side. Take is this way: jsTree only displays whatever is passed to it. So you make a decision what to load in a first go and you can have a button (to reload the whole tree or a branch only) to load more or replace whatever was loaded. Don't forget the logic has (almost) nothing to do with jsTree.