The rails application is using the datatable to populate the data which is received from the remote system ( using ajax call) . the things were working fine till the remote system was sending plain text. But now the system is sending the response data as html. Because of that the whole page formating is disturbed. How to display the html returned as it is in the datatable row? The code is as below. The html returned from remote system is displayed in message field.
var logs = window.location.pathname + '/logs.json';
var logTable = $("table").DataTable({
"oLanguage": {
"sSearch": "Search"
},
"paging": false,
"dom" : 't',
"order": [[0, "desc"]],
"ajax": {
"url": logs,
'dataSrc': function ( json ) {
return json;
}
},
"drawCallback": function(){
refreshProgressBar();
},
columns: [
{data : "created_at"},
{data : "level"},
{data : "message"},
],
});
Related
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 :)
How can I set custom data to a select2 v.4 per javascript? I understand that you can set the id and text value by inserting an option tag but that does not cover all the other data I want to have there in addition, e.g. [{"id":"17","text":"22.09.2015 15:45:05","branchList":["20","1","3","4","5"]}]
I use this code to set up the control, which works perfect:
$('#image_id').select2({
placeholder: "Search image ...",
minimumInputLength: 0,
allowClear: true,
dropdownAutoWidth: true,
theme: "bootstrap",
ajax: {
url: "ajax/select2_image_search.php",
delay: 250,
dataType: 'json',
data: function (params) {
return {
keywords: params.term
};
},
processResults: function (data, page) {
return {
results: data
};
}
},
});
when I then use this code, I can extract not only id and text but also custom data like branchList:
var bList = $('#image_id').select2("data")[0]["branchList"];
this works well too, but how can I set the additional info programatically per script with e.g. this data [{"id":"18","text":"23.09.2015 15:45:05","branchList":["22","5","7","32","1"]}] so that I can retrieve the additional info lateron per javascript?
Thanks a lot for your help :)
Simplest way is put your custom data to id with JSON.stringify(). Maybe it is not good way but it works for me.
So your code transforms to:
[ {
"id" : JSON.stringify({
"id" : "18",
"branchList" : [ "22", "5", "7", "32", "1" ]
}),
"text" : "23.09.2015 15:45:05"
} ]
And you can later extract your data back by JSON.parse(selector.selectedOptions[0].value).
I am using following Jquery Datatables code:
$(document).ready(function() {
table = DataTable({
"ajax": {
"url" : '/Book/list/' + book_id,
"dataSrc": function(data) {
return data.book_details;
},
"searching": false
"columns": [
{ "data": "id"},
{ "data": "book_name" },
{ "data": "price"},
{ "data": "rank"},
]
});
I want to edit the 'Price' column - Tried editor plugin but since that is not an opensouce plugin, I am not able to use it.
And the second thing i need is :
After editing 'price' column for every row, by clicking save button, it has to save every modified value in datatable.
Anyone please help?
I would like enable a user to create a new Fusion Table through my application.
gapi.client.load('fusiontables', 'v2').then(function() {
var request = gapi.client.fusiontables.table.insert({
'columns' : [{
'name': 'test'
}],
'isExportable' : true,
'name' : 'Foobar',
});
request.then(function(resp) {
alert(resp)
}, function(reason) {
console.log(reason);
alert('Error: ' + reason.result.error.message);
});
});
Everything appears to be working fine but my response continues to be status code 500 "Backend Error".
I went to https://developers.google.com/apis-explorer/#p/fusiontables/v2/fusiontables.table.insert and used the API explorer to execute the same. The result there was 500 as well. Does anyone know why this is happening/how I can succeed in creating a new Fusion Table for my users?
I think that columns need both a column name and a type to define it. That's why your request is failing:
gapi.client.load('fusiontables', 'v2').then(function() {
var request = gapi.client.fusiontables.table.insert({
'columns' : [{
"name": "TACOS",
"type": "STRING"
}],
'isExportable' : true,
'name' : 'FoodBar',
});
request.then(function(resp) {
alert(resp)
}, function(reason) {
console.log(reason);
alert('Error: ' + reason.result.error.message);
});
});
iam using jquery autocomplete in asp.net project. it's not working. do you have any idea. the code is given below.
<script type="text/javascript">
$(function () {
$('#clientabbrev').val("");
$("#clientstate").autocomplete({
source: "clientstates.aspx",
select: function (event, ui) {
$('#clientstateid').val(ui.item.clientid);
$('#clientstateabbrev').val(ui.item.clientabbrev);
}
});
$("#clientstate_abbrev").autocomplete({
source: "clientstatesabbrev.aspx",
minLength: 2
});
});
</script>
problem is states.aspx returning the data but it is not showing in the jquery autocomplete control.
Your server needs to return a JSON serialized array of objects with properties id, label, and value. E.g. :
[ { "id": "1", "label": "Mike Smith", "value": "Mike Smith" }, { "id": "2", "label": "Bruce Wayne", "value": "Bruce Wayne" }]
Can you confirm with firebug or Fiddler that your server is returning the correct response?
If you're having trouble serializing your data in C#, you can try using JavaScriptSerializer like this:
var result = from u in users
select new {
id = u.Id,
value = u.Name,
label = u.Name
};
JavaScriptSerialier serializer = new JavaScriptSerializer();
var json = serializer.Serialize(result);
// now return json in your response