I have a database of lots of info that build the table. What I want to be able to do is load the data through the ajax call and then be able to edit the data in the table. But I can't get the data to show up on the page. I'm using the DataTables in another interface and the loading, sorting, and other cool features work. I haven't used Editor before and I'm a little confused.
function drawDataTable(){
var len = allocationData.length;
html = "<div id='dataTableDiv'><table id='dataTable' class='table table-bordered table-striped dataTable' role='grid'><thead><tr role='row'><th>System Name</th><th>Gatherer</th><th>Operator</th><th>County</th><th>Sample Date</th><th>Daily Avg</th></tr></thead><tbody>";
for (i=0;i<len;i++){
html += "<tr><td>" + allocationData['SystemName'][i] + "</td><td>" + allocationData['Gatherer'][i] + "</td><td>" + allocationData['Operator'][i] + "</td><td>" + allocationData['County'][i] + "</td><td>" + allocationData['SampleDate'][i] + "</td><td>" + allocationData['DailyAvg'][i] + "</td></tr>";
}
html += "</tbody></table></div>";
$(".table-responsive").html(html);
}
$(function(){
editor = new $.fn.dataTable.Editor( {
"ajax": "qry/dataTable.php",
"table": "#dataTable",
"fields":[{
"name": "SystemName"
},{
"name": "Gatherer"
},{
"name": "Operator"
},{
"name": "County"
},{
"name": "SampleDate"
},{
"name": "DailyAvg"
}]
});
$('#dataTable').DataTable({
dom: "Bfrtip",
ajax: {
type: "POST",
url: "qry/dataTable.php",
success: function(){
drawDataTable();
}
},
serverSide: true,
columns: [
{data: "SystemName"},
{data: "Gatherer"},
{data: "Operator"},
{data: "County"},
{data: "SampleDate"},
{data: "DailyAvg"}
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
});
});
Try editing your success: function. See if this helps.
success: function(result){
allocationData = JSON.parse(result);
drawDataTable();
}
Related
I am trying to fetch data from an API of WordPress. Here is my code:
column.data().unique().sort().each(function (d,j) {
var practiceArea = d.practice_area;
var jsonPacticeArea = JSON.stringify(practiceArea);
if (jsonPacticeArea !== undefined) {
var res = $.map(jsonPacticeArea.split("|"), $.trim);
for (var i = 0; i < res.length; i++) {
var str = res[i];
str = str.replace(/"/gi, '').trim();
if (arrayPracticeArea.indexOf(str) === -1) {
arrayPracticeArea.push(str);
}
}
}
});
the "column" is the variable that is getting data through an API, and as far as I do console.log(column. data().unique().sort()), that's returning complete data as you can see in the screenshot:
[![enter image description here][1]][1]
and I want to fetch data is marked in red rectangle and store those values in an array, but as soon as I try to add "each" function to fetch the data and store it in an array (in my case its arrayPracticeArea) its returning undefined values.
Can anyone please help me out? I am just not much experienced with Javascript API.
Here is my AJAX code:
var tableAttorney = $('#table_affliate_attorney').DataTable({
destroy: true,
searching: true,
bLengthChange: false,
scrollX: true,
scrollY: 440,
autoWidth: false,
"language": {
"emptyTable": "We are sorry but there are no Affiliate Attorneys within a 150 mile radius of your requested search"
},
ajax: {
type: 'get',
url: "/wp-admin/admin-ajax.php",
dataType: 'json',
cache: false,
data: {
'action': 'get_attorney_ajax',
'center_lat': center_lat,
'center_long': center_long,
'state': state,
'city': city,
'zip': zip
}
},
columns: [
{"data": "title"},
{"data": "city"},
{"data": "state"},
{"data": "zip"},
{"data": "distance"},
{
"data": "phone",
className: 'datatablePhone',
render: function (data) {
return '' + data + '';
}
},
{
"data": "email",
className: 'px190EM',
render: function (data) {
return '' + data + '';
}
},
{
className: 'js-practice-area',
"data": "practice_area"
},
{
"targets": -1,
"data": 'email',
render: function (data) {
return "<a class='contact-lawyer' href='#' data-toggle='modal' data-target='#exampleModal' data-whatever='#mdo' data-email='"+data+"'>Contact</a>";
}
},
],
columnDefs: [
{"width": "150px", "targets": [0]},
{"width": "130px", "targets": [5]}
],
So I am trying to fetch data from columns->data that has value practice_area.
Here is the fiddle link where I have hosted my whole JS code: https://jsfiddle.net/fareeboy/apor08jn/1/
[1]: https://i.stack.imgur.com/4EOZS.png
When I click on the download link in the attached example, I want only the download event to be executed, but not the editor event.
Dojo Example: https://dojo.telerik.com/EcEDiGUB/27
HTML:
<div id="grid"></div>
JS:
var grid;
$(document).ready(function(){
grid = $("#grid").kendoGrid({
columns: [
{
field: "name",
},
{
field: "file",
template: function(e){
return '<div class="box">' + e.file + '</div>';
},
editor: function(e){
alert("open media editor");
return true;
}
}
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", file: "<div class='container'></div>" +
"<div class='file k-icon k-i-file-pdf'></div>" +
"<div class='download k-icon k-i-download'></div>" +
"</div>" },
{ id: 2, name: "John Doe", file: "<div class='container'></div>" +
"<div class='file k-icon k-i-file-pdf'></div>" +
"<div class='download k-icon k-i-download'></div>" +
"</div>" +
"<div class='container'></div>" +
"<div class='file k-icon k-i-file-xls'></div>" +
"<div class='download k-icon k-i-download'></div>" +
"</div>" }
],
schema:{
model: {
id: "id",
fields: {
file: { type: "string"}
}
}
}
},
editable: true,
}).data("grid");
$(".download").on("click", function(e){
e.preventDefault();
alert("download media");
});
It is now that the editable mode:
editable: true,
should be kept, because it is possible to edit as well as to start a download.
How can I start the download by clicking on the download icon without the editor event being fired?
you can use the columns.editable property:
{
field: "file",
template: function(e){
return '<div class="box">' + e.file + '</div>';
},
editable: function(){
return false;
},
editor: function(e){
alert("open media editor");
return true;
}
}
Dojo
I want to call SetDataDepartment(data), but i am not able to call. also used $compile in controller
table = $('#DepartmentTable').DataTable({
data: Department.departmentsList,
columns: [
{
title: "DepartmentName",
data: "DepartmentName"
}, {
title: "Colleges",
data: "Colleges.College_Name"
}, {
"title": "Action",
"data": "Id",
"render": function (data) {
var aa = "<a href='javascript:void(0)' ng-Click='SetDataDepartment(" + data + ")'>edit</a>";
return aa;
}
}]
});
I currently have a normal ASPNETZERO index page, which renders a datatable grid with search fuctions. I want to change this view to render "tiles" for each row in the grid. I already have the CSS/HTML for rendering tiles working. I basically want to repurpose the below index.js code to render my tiles, instead of the datatable grid.
(function () {
$(function () {
var _$companyTable = $('#companyTable');
var _companyService = abp.services.app.company;
var _permissions = {
create: abp.auth.hasPermission('Pages.Tenant.Administration.Company.Create'),
edit: abp.auth.hasPermission('Pages.Tenant.Administration.Company.Edit'),
impersonation: abp.auth.hasPermission('Pages.Tenants.Impersonation'),
};
var _createModal = new app.ModalManager({
viewUrl: abp.appPath + 'Nursing/Company/CreateModal',
scriptUrl: abp.appPath + 'view-resources/Areas/Nursing/Views/Company/_CreateModal.js',
modalClass: 'CreateCompanyModal'
});
var _editModal = new app.ModalManager({
viewUrl: abp.appPath + 'Nursing/Company/EditModal',
scriptUrl: abp.appPath + 'view-resources/Areas/Nursing/Views/Company/_EditModal.js',
modalClass: 'EditCompanyModal'
});
var dataTable = _$companyTable.DataTable({
paging: true,
serverSide: true,
processing: true,
responsive: true,
listAction: {
ajaxFunction: _companyService.getCompanies,
inputFilter: function () {
return {
filter: $('#CompanyTableFilter').val()
};
}
},
columnDefs: [
{
targets: 0,
data: null,
orderable: false,
autoWidth: true,
defaultContent: '',
rowAction: {
cssClass: 'btn btn-xs btn-primary blue',
text: '<i class="fa fa-cog"></i> ' + app.localize('Actions') + ' <span class="caret"></span>',
items: [{
text: app.localize('Edit'),
visible: function () {
return _permissions.edit;
},
action: function (data) {
_editModal.open({ id: data.record.id });
}
}]
}
},
{
targets: 1,
orderable: true,
autoWidth: true,
data: "companyName"
},
{
targets: 2,
orderable: true,
autoWidth: true,
data: "companyLegalName"
},
{
targets: 3,
autoWidth: true,
data: "companyTaxID"
},
{
targets: 4,
orderable: true,
autoWidth: true,
data: "currency"
}
]
});
function getCompanies() {
dataTable.ajax.reload();
}
$('#CreateNewCompanyButton').click(function (e) {
_createModal.open();
});
$('#GetCompaniesButton').click(function (e) {
e.preventDefault();
getCompanies();
});
abp.event.on('app.editCompanyModalSaved', function () {
getCompanies(true);
});
abp.event.on('app.createCompanyModalSaved', function () {
getCompanies(true);
});
$('#CompanyTableFilter').focus();
});
How can I change the JS code above to render my tiles instead of the datatable? I also want to retain the search function for the tiles. The app service method GetCompanies used in the JS code above works for rendering my tiles. So that API call will remain the same.
Here is the output I want to achieve from the above JS code.
Here is the current standard ABP index page view. I want to replace this with above tiles.
I figured out a solution. I changed the index.js code by adding the method shown below. I'm using an AJAX call to the API method and then using the results to render my tiled output. This is working for me.
If anyone sees any issues with this approach, please do let me know.
function getCompanies() {
$.ajax({
type: 'GET',
url: '/api/services/app/Company/GetCompanies',
dataType: 'json',
success: function (companies) {
var _tileHtml = "";
//Iterate thru JSON list of values
$.each(companies.result.items, function (i, company) {
//Tile content start
_tileHtml = "<div class='SingleTileContent inline-block'>";
//Header
_tileHtml += "<div class='Tile-header'>";
_tileHtml += "<div class='pull-left inline-block'>";
_tileHtml += "<div class='badge badge-info'>" + company.id + "</div>";
_tileHtml += "</div>";
_tileHtml += "<div class='pull-left inline-block text-bold'> | " + company.companyName + "</div>";
_tileHtml += "</div>";
//Body start
_tileHtml += "<div class='Tile-body text-left'>";
//Body row
_tileHtml += "<div class='Tile-body-detail'>";
_tileHtml += "<label>Legal Name</label> " + company.companyLegalName + "</div>";
//Body row
_tileHtml += "<div class='Tile-body-detail'>";
_tileHtml += "<label>Tax Id</label> " + company.companyTaxID + "</div>";
//Body end
_tileHtml += "</div>";
//Buttons (footer)
_tileHtml += "<div class='Tile-buttons'>";
_tileHtml += "<a href='javascript:;' class='btn btn-xs blue btnEdit' id='EditCompanyButton'>Edit<i class='fa fa-edit'></i></a>";
_tileHtml += "</div>";
//Tile content end
_tileHtml += "</div>";
$("#TestJS2").append(_tileHtml);
});
Count = 0;
},
error: function (ex) {
abp.notify.error('Failed to retrieve companies' + ex);
}
});
}
I am using javascript dataTable and I'm populating a table by getting the data via an api link this:
jQuery.get(api_url_here", function(dataSet){
jQuery('#myTable').DataTable( {
data: dataSet,
columns: [
{ "data": "id", "title": "theId" },
{ "data": "name", "title": "theName" }
]
});
});
<table id="myTable" class="display"></table>
This all works as required but I need one of the columns to have a link created so that when the user clicks the id it will go to the url assigned with the id...
For example: theId
How can I do this with dataTable?
"ajax": "./pasien/look/",
aoColumns: [
{ "mData": null }
],
columnDefs: [{
"targets": 0,
"data": null,
"mRender": function (data, type, row) {
return ''+ row.mr +'';
}
}]
try this, i use ajax for data in datatables.
try like this:
{
"data": "id",
"title": "theId",
"aTargets": [0],
"sType": "numeric"
},
{
"className": '',
"orderable": false,
"data": null,
"defaultContent": '<a href="your link"</a>'
}];
jQuery has a event thats fired when the cell is created, you can then write normal javascript to set it's content with the id:
jQuery.get("api_url_here", function(dataSet){
jQuery('#myTable').DataTable( {
data: dataSet,
columns: [
{ "data": "id", "title": "theId",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a class='display' href='" + oData.id + "'>" + oData.id + "</a>");
}
},
{ "data": "name", "title": "theName" }
]
});
});
I hope it helps you.
I took the answer from https://www.datatables.net/forums/discussion/25111/hyperlink-in-td.