So, the situation is this. There is a HTML page with a table in it, that is using the DataTables plugin. I have to show data that I'm receiving from a jQuery POST call in the table, but I always seem to get errors and am lost in how to go about doing that.
This is what the response from the POST call looks like:
[{"idoperatore":10,"nome_cognome":"Daniele Torrini","tariffa_esterno":"50.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":11,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"DT"},{"idoperatore":12,"nome_cognome":"Irene Cavalletto","tariffa_esterno":"75.00","tariffa_interno":"45.00","tariffa_viaggio":"30.00","idtariffa_esterno":9,"idtariffa_interno":15,"idtariffa_viaggio":13,"attivo":1,"rs":1,"iniziali":"IC"},{"idoperatore":14,"nome_cognome":"Sandra Moschetti","tariffa_esterno":"50.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":11,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"SM"},{"idoperatore":15,"nome_cognome":"Federica Coucourde","tariffa_esterno":"90.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":8,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"FC"},{"idoperatore":16,"nome_cognome":"Matteo Belgero","tariffa_esterno":"75.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":9,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"MB"},{"idoperatore":17,"nome_cognome":"Luca Belgero","tariffa_esterno":"90.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":8,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"LB"},{"idoperatore":18,"nome_cognome":"Federico Bottoni","tariffa_esterno":"50.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":11,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"FB"},{"idoperatore":19,"nome_cognome":"Giuseppe Pantaleo","tariffa_esterno":"60.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":10,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"GP"},{"idoperatore":20,"nome_cognome":"Matteo Ferrario","tariffa_esterno":"90.00","tariffa_interno":"75.00","tariffa_viaggio":"30.00","idtariffa_esterno":8,"idtariffa_interno":9,"idtariffa_viaggio":13,"attivo":1,"rs":1,"iniziali":"MF"},{"idoperatore":21,"nome_cognome":"Alessandro Mazzeranghi","tariffa_esterno":"100.00","tariffa_interno":"0.00","tariffa_viaggio":"30.00","idtariffa_esterno":7,"idtariffa_interno":16,"idtariffa_viaggio":13,"attivo":1,"rs":0,"iniziali":"AM"}]
I have no way of modifying the call, I have to work with that. I just have access to the variable that contains that response from the callback, but I can however transform or modify that data if needed.
This is what the HTML table looks like:
<table class="display nowrap" id="table_operatori">
<thead>
<tr>
<th>
<span></span>
</th>
<th class="mdl-data-table__cell--non-numeric">Nome e Cognome</th>
<th>Tariffa Esterno</th>
<th>Tariffa Interno</th>
<th>Tariffa Viaggio</th>
<th>Attivo?</th>
<th>RS?</th>
<th class="mdl-data-table__cell--non-numeric">Iniziali</th>
</tr>
</thead>
<tbody id="table_operatori_tbody">
</tbody>
</table>
There are not the same number of columns in the table as fields in the JSON because the fields in JSON starting with "id" have to be hidden values, and were used before as attributes of the HTML elements, to use them in later moments. It's also the reason for the empty header: the table was actually filled with pure HTML before, and had a checkbox in front to select the row, like this:
data.forEach(function (element) {
element["attivo"] == "1" ? element["attivo"] = "Si" : element["attivo"] = "No";
element["rs"] == "1" ? element["rs"] = "Si" : element["rs"] = "No";
var i = element['idoperatore'];
var tableRow = '<tr><td><label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="table_operatori_checkbox_row[' + i + ']"><input type="checkbox" id="table_operatori_checkbox_row[' + i + ']" class="mdl-checkbox__input" onClick="fOperatore_Checkbox_SelectUnique(' + i + ')" /></label></td>'
tableRow += '<td class="mdl-data-table__cell--non-numeric" id="table_operatori_nomecognome_row[' + i + ']">' + element['nome_cognome'] + '</td>';
tableRow += '<td id="table_operatori_tariffaesterno_row[' + i + ']" idtariffa="' + element["idtariffa_esterno"] + '">' + element['tariffa_esterno'] + '</td>';
tableRow += '<td id="table_operatori_tariffainterno_row[' + i + ']" idtariffa="' + element["idtariffa_interno"] + '">' + element['tariffa_interno'] + '</td>';
tableRow += '<td id="table_operatori_tariffaviaggio_row[' + i + ']" idtariffa="' + element["idtariffa_viaggio"] + '">' + element['tariffa_viaggio'] + '</td>';
tableRow += '<td id="table_operatori_attivo_row[' + i + ']">' + element['attivo'] + '</td>';
tableRow += '<td id="table_operatori_rs_row[' + i + ']">' + element['rs'] + '</td>';
tableRow += '<td class="mdl-data-table__cell--non-numeric" id="table_operatori_iniziali_row[' + i + ']">' + element['iniziali'] + '</td></tr>';
$("#table_operatori_tbody").append(tableRow);
This worked, in a sense, (apart from being extremely ugly) meaning that the table formed and you could select rows like we wanted and act on those later. But you couldn't sort, or filter with search, any of the rows in the table.
Still, I was willing to maintain the ugly HTML building if it meant getting the DataTable to work, since with .row.add() you can add a element, I tried that as well, changing the .append(tableRow) with:
.DataTable().row.add($.parseHTML(tableRow));
This didn't work either, and gave the same error. Also displayed this on the table though: Displays object picture
At the moment of initialization, I don't have the data to put inside the table. The table has to be initialized empty, and rows from the response added at a later time. I tried (with "data" being the variable containing the response from the server):
$("#table_operatori").DataTable().rows.add(data);
Which would remove a lot of the ugly HTML building, but it gives error:
DataTables warning: table id=table_operatori - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4
So, by looking at that tech-notes link, it says that it may be that you have more columns in the table head than in the table body, so I matched exactly the fields that I get, when defining the table, thinking that I may eventually be able to hide the columns that I don't need if that works.
$("#table_offerte").DataTable({
paging: false,
info: false,
columns: [
{ title: "idoperatore" },
{ title: "nome_cognome" },
{ title: "tariffa_esterno" },
{ title: "tariffa_interno" },
{ title: "tariffa_viaggio" },
{ title: "idtariffa_esterno" },
{ title: "idtariffa_interno" },
{ title: "idtariffa_viaggio" },
{ title: "attivo" },
{ title: "rs" },
{ title: "iniziali" }
]
});
But it still gives the same error. It also does if I match the table structure with the DataTable initialization :
columns: [
{ title: "idoperatore" },
{ title: "nome_cognome" },
{ title: "tariffa_esterno" },
{ title: "tariffa_interno" },
{ title: "tariffa_viaggio" },
{ title: "attivo" },
{ title: "rs" },
{ title: "iniziali" }
]
Documentation from DataTables also says that it looks inside a data: property when looking at JSON data, and you have to specify if it is not an object but an array by setting an empty string in the dataSrc property:
DataTable({ ajax: { url: "something.json", dataSrc: "" } });
The problem is that it requires the data being requested by the url: property, and I cannot do that, because I only have the "data" variable which contains the JSON.
I should also mention that by maintaining the old HTML building and appending it inside the table body, makes the table work and display stuff right, like this, but of course as soon as you try to sort or filter anything, it all disappears because the DataTable doesn't ACTUALLY have the rows inside it, just the HTML does.
I have no idea how to get this data in there. I hope I explained everything clearly, otherwise feel free to ask anything and I will try my best to clarify.
Thanks in advance for any help.
The doc is a bit confusing, because there are so many different ways to set up a table, and it's pretty much one guy (Allan Jardine) both writing the plugin and documenting it.
First, you don't need any table headers. Change your HTML to this:
<table class="display nowrap" id="table_operatori"></table>
If you want to add ids or classes to tbody tags, then you'll need to add them in as well. But to start, this is all the HTML you need.
What's confusing here is that a lot of Allan's examples include the data hard-coded into the HTML, with no JSON or AJAX or anything involved. When you do that, then you do need to set up the HTML headers, and all the cells, and everything else. Take a look at the HTML in one of his examples (this one, for example) and see this for yourself. And then, when he moves on to JSON examples, he pulls the data but he leaves the headers in. And again, you can put them in, but don't have to.
Rather, if you're pulling your data from JSON, you can either specify your headers with HTML th tags or you can do it with the columns (or colDefs) option. You don't need to do both. This isn't as clear from the doc as it might be, since in most of the examples Allan does do both.
Whichever way you specify the headers, they have to match the column count of the JSON feed. If they don't, you'll get some form of the error you're getting. Furthermore, if you use both column and th, they both have to match your JSON field count or you'll get that error. That's why you're getting your error. You matched your columns definition correctly, but you've left some th tags out in your table definition. The solution is to remove the th tags entirely.
I'm going to presume that the reason that you left out some th tags is that you are under the impression that that's the way to make the column invisible. It isn't, for the reasons I've described above. The easiest way to define whether a column is visible or not (as well as define a lot of other possible attributes, listed here) is in your columns array: just set the column's visible option to false. (You could also use th tags with a class and set visibility:none in CSS, but this is simpler. Less to keep track of.)
Also, the title value on a column is the value for title in your columns array for that column. So, you need to make it look the way you want it, not put the name of your JSON field there.
Finally, with the data option, you're reading the wrong part of the documentation, which is about how to pull JSON from a URL using AJAX at the time you run dataTable(). You have the data already in your POST data, so you don't need to do that. So, read this instead. Have a look at the second example, which shows an array of objects as a data source. From what I see of your JSON string, you should just have to add an option like this:
data: myPOSTResponse,
Putting all that together:
$("#table_offerte").DataTable({
paging: false,
info: false,
data: myPOSTResponse,
columns: [
{ visible: false }, //this is the ID you don't want to see, no need to give it a title
{ title: "Nome e Cognome", className: "mdl-data-table__cell--non-numeric" },
{ title: "Tariffa Esterno" },
{ title: "Tariffa Interno" },
{ title: "Tariffa Viaggio" },
{ visible: false },
{ visible: false },
{ visible: false },
{ title: "Attivo?" },
{ title: "RS?" },
{ title: "Iniziali", className: "mdl-data-table__cell--non-numeric" }
]
});
That should get you running, if you haven't done something else interesting. :)
Edit: as DocCobra mentions in the comments, you also have to specify the data: option at the field level here, since the array elements are objects. If they are themselves arrays, you do not.
I have a blade template with a search bar, which has no submit button and is used for filtering. However, I can't seem to get it to filter appropriately, as the page was originally using angular (which has been removed completely).
My page displays all of my products using foreach loops and displays the info from variables in my page controller (pulling everything from the database and storing as variables). Anyway, everything displays fine but I need help getting this to filter properly.
Basically, if a term entered in the search bar is anywhere in the JSON object gathered by the controller, then I want it to only display those objects. I may even need another foreach loop.
Here's the html/blade code:
<!--Search bar div-->
<div class="uk-width-5-10">
<div class="md-input-wrapper search-form">
<form id="searchProducts">
<input type="text" class="md-input label-fixed" name="srch-term" id="srch-term" autofocus placeholder="Search Products"/>
<span class="md-input-bar"></span>
</form>
</div>
<!--foreach loops around the wrapper that shows products, for reference-->
#foreach ($orderFormData->pgroups as $pgroup)
#foreach ($pgroup->image_names as $image_name)
#foreach ($pgroup->pskus as $psku)
Javascript for the search (see the variable for the JSON object, that's what I need to search within)
<script>
var orderFormData = <?php echo json_encode ($tempdata);?>;
</script>
<script>
var orderData = orderFormData // default value
var search = function (e) {
var term = e.currentTarget.value
orderData = Object.entries(orderFormData).reduce(function (data, entry) {
if (entry[0].match(term) || entry[1].match(term)) {
data[entry[0]] = entry[1]
}
return data
}, {})
console.log(orderData)
}
document.querySelector('#srch-term').addEventListener('keyup', search)
</script>
Is there a better way I should be doing this? I may even need to do a foreach loop around the search bar
It kind of sounds like you're looking for an auto complete. Have you looked at the jquery-ui-autocomplete library? It's pretty easy to implement, and might add more functionality more easily than writing loops yourself.
https://jqueryui.com/autocomplete/
I'll get into why I named the function below, but here's my implementation:
monkeyPatchAutocomplete();
$("#your_searchbox_selector").autocomplete({
source: // http://Your_Search_URL_endpoint_here,
delay: 500, // prevents search from running on *every* keystroke
minLength: 1, // default is 2, change or remove as you like
// open page after selecting (with enter key).
select: function( event, ui )
{
var qval = ui.item.id // this pulls whatever field you're looking for in your JSON that you want to use to direct your user to the new page, in my case "id";
var url = 'http://whereever_you_want_your_user_to_go?';
window.location = url + qval;
}
});
For my implementation, I wanted to color code the results in my autocomplete list with active and inactive entries, so my search controller JSON result includes 3 fields:
'value' => $searchable_values, 'id' => $id_mapping_of_whatever, 'class' => $css_classes_to_use
My search controller plugs in emails, names, and phone numbers to the value field, which is searchable, then maps an id, and plugs in css classes that I use to change the text color of the results through a monkeypatch on jQuery's autocomplete:
function monkeyPatchAutocomplete()
{
$.ui.autocomplete.prototype._renderItem = function( ul, item)
{
var re = new RegExp(this.term, 'i');
var t = item.label.replace(re,"<span class='autocomplete-span'>" + this.term + "</span>");
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a class='text-" + item.class + "'>" + t + "</a>" )
.appendTo( ul )
};
};
If you're interested in formatting your results, check out dev.e.loper's answer to: How can I custom-format the Autocomplete plug-in results?.
This is the scenario. In a jQuery DataTable I have some value and an edit button to modify 2 of them; clicking on it, a modal popup is opened and offer a form to insert the new value for notes and status:
...
"columnDefs": [
{
"targets": [ 0 ],
"visible": false
//"searchable": false
}],
"columns": [
{ "data": "id" },
{ "data": "date" },
{ "data": "type" },
{ "data": "name" },
{ "data": "user_name" },
{ "data": "status" },
{ "data": "closing_date" },
{ "data": "info" },
{ "data": "note" },
{ "data": null,
"render": function ( data, type, full, meta ) {
return "<button type='button' class='btn btn-info btn-md' id=\'" + full.id + "\' data-toggle='modal' data-id=\'" + full.id + "\' data-target='#myModal'> Edit </button>";
}
...
Immediately below, I have the ajax function to send the inserted value to a Spring controller:
//This function is used to send the form data to Spring controller; cause we use a modal, with code that must be put in the file with html table head,
//we must replace the use of view made by jsp using an ajax function
$('#myModal').on('click', '.btn.btn-success', function(event) {
var form = $('#updateeventsform'); //recover the form inside modal by using id
var formdata = form.serializeObject(); //use the serializeObject function to prepare data for Json format
formdata.idevent = $(this).attr('data-id'); //add the event id to form data, after setting it with the IDnumber variabile
console.log(formdata, this);
event.preventDefault();
//here starts the code to sending data to Spring controller
$.ajax({
url: "../updateevents.json",
type: "post",
data: formdata,
success : function() {
console.log("Invio riuscito.");
DTevents.ajax.reload( null, false ); //we reload the table, showing immediately the data updated.
}
});
});
This code give me an undefined value on formdata.idevent; and it's right, because the $(this) value refers to the current element (in my case, the submit button).
As you can see, the id for the button is a numeric value, setted with the full.id field.
So, I've got a try: put a numeric value as selector for attr() function. I changed:
formdata.idevent = $(this).attr('data-id');
in
formdata.idevent = $('#5').attr('data-id');
and this works.
So, the question is: is there a way to use a variable value as selector for the .attr() function? If no, what should I use to pass the correct value to the controller?
Edit for comment answer.
Already used $(this).data('id'); does not works. I got undefined values for idevent.
<button type='button' class='btn btn-info btn-md' **id=\'" + full.id +**
here you can note the numeric id of button element.
The intent is: this table represent events. When the 2 fields modified, notes and status, must be send to the controller, i Must send also the events id to it and i want perform this with the use of .attr() function.
Now, this function must be used on a selector; i may want use the button id as selector but I have different button with different id. So, if i click the 4th button, the id is 4 and I may have:
formdata.idevent = $['#4'].attr('data-id');
if I click the 5th button the code must be:
formdata.idevent = $['#5'].attr('data-id');
if I click the 6th button:
formdata.idevent = $['#6'].attr('data-id');
and so on. So, I have a variable selector to use; I don't know how to perform this.
I would try to add an hidden input to the modal...
<input type="hidden" id="idevent" name="idevent">
And on a "Edit" button click, carry its id to the modal form:
$(".btn.btn-info").on("click",function(){
var idevent = $(this).data("id"); // Or $(this).attr("id")
// Delay for the modal openning animation...
setTimout(function(idevent){
$('#myModal form #idevent').val(idevent);
},800);
});
Then, the info would already be in the form when user submits it.;)
I'm trying to implement a choose-field with a <select> control.
<div id="container" onchange="fieldChangeHandler(event)">
...
<div class="item" >
<label>Status</label>
<select id="STATDES" onfocus="focusdiv(event)" onblur="defocusdiv(event)"></select>
</div>
In the updateFields() handler I identify the control type:
function updateFields(result) {
if (result[myForm.name]) {
var fields = result[myForm.name][1];
for (var fieldName in fields) {
var el = document.getElementById(fieldName);
if (el) {
switch (el.nodeName){
case "INPUT":
el.value = fields[fieldName];
break;
case 'SELECT':
fill(el, fields[fieldName]);
el.value = fields[fieldName];
break;
};
};
}
}
}
...And if the control is a <select> I fill in the options with a call to the form choose:
function fill(el, sel){
myForm.choose(el.id, "").then(
function (searchObj) {
var i, ch;
$('#'+el.id).empty();
for (i in searchObj.ChooseLine) {
ch = searchObj.ChooseLine[i];
if (ch.string1 == sel){
$("#"+el.id).append('<option selected value="'+ ch.string1 +'">'+ ch.string1 +'</option>');
} else {
$('#'+el.id).append('<option value="'+ ch.string1 +'">'+ ch.string1 +'</option>');
};
};
},
function (serverResponse) {
alert(serverResponse.message);
}
);
};
Subsequent calls to the fieldChangeHandler by the <select> onchange event call the fieldUpdate method on the loaded form:
function fieldChangeHandler(event) {
console.log("%s=%s", event.srcElement.id, event.target.value);
myForm.fieldUpdate(event.srcElement.id, event.target.value);
}
This all works fine till I try to save the current form record.
function saveHandler() {
myForm.saveRow(
0,
function(){
console.log("Row Saved.");
},
function(serverResponse){
console.log("%j", serverResponse);
});
}
where I get the following output:
Object {type: "error", ...}
code:"stop"
fatal:false
form:Object
message:"Status missing."
type:"error"
__proto__:Object
How do I override the saveRow function to make it retrieve it's data from the <select> control please?
You MUST specify the current value in choose parameters. It won't read it from the current record as I (mis)read the docs..
Note: If the field currently cotains a value, it will automatically be
filled in as fieldValue, even if a different fieldValue was specified.
So, the fill function should look like this...
function fill(el, sel){
myForm.choose(el.id, sel).then(
...
};
I just want to point something out. The choose method : myform.choose is not necessarily called after a field update.
I understand that in ur case the choose list gets different values for each field update and that u need to update ur select. Which is cool but in case someone uses a choose list that is not changed after fields updates it is better to call this method only once!
Just writing it here to clarify things about the choose method :)
So I'm using the Select2 JQuery based replacement for select boxes.
I've set it up (with help from an example I found) for remote data searching via ajax which works great. I've got a minimum input value of 3 so the user has to enter at least 3 characters before the search starts (otherwise "A" would return 90% of the searchable values).
Unfortunately a large portion of my searchable values also start with "The". So if a user types "The", 50% of the results get returned, populating a huge dropdown with basically unfiltered results ... not ideal!
Is there any way to get Select2 to ignore certain set phrases, ie typing "The" shouldn't count towards the minimum 3 character count!
$('#searchInput').select2({
minimumInputLength: 3,
placeholder: 'Please search here ...',
ajax: {
url: "/api/v1/institutes",
dataType: 'json',
quietMillis: 100,
data: function(term, page) {
return {
query: term
};
},
results: function(data, page ) {
return { results: data }
}
},
formatResult: function(institute) {
return "<div class='select2-user-result'>" + institute.name + "</div>";
},
formatSelection: function(institute) {
return institute.name;
},
initSelection : function (element, callback) {
var elementText = $(element).attr('data-init-text');
callback({"term":elementText});
}
});
You can check Select2 docs - search, where you can customize to match your pattern.
I faced the same problem. I solved the problem by using "data-minimum-input-length" attribute in html code.
<select id="mySelect" data-minimum-input-length="3"></select>