I have bootstrap table and it has function on double click event. On my laptop it works fine, however on the mobile when I try double tap row nothing happens.
CODE:
<div class="col-xs-24 main">
<table id="table-pagination" class="table table-striped">
<thead>
<tr>
<th data-field="order_create_date" data-align="center"> Užsakymo data</th>
<th data-field="order_user_id" data-align="center"> Vartotojas</th>
<th data-field="order_client_name" data-align="center">Užsakovas</th>
<th data-field="order_client_order_number" data-align="center">Užsakovo užsakymo nr</th>
<th data-field="order_pickup_date" data-align="center">Pasikrovimo data</th>
</tr>
</thead>
</table>
<script>
getorders(function(r) {
$('#table-pagination').bootstrapTable({
data: r,
pagination: true,
pageList: [10, 20, 50, 100],
search: true,
showColumns: true,
onDblClickRow: function (row, $element) {
var key = row["key"];
window.location.href = "orders/display/"+key;
}
});
});
</script>
</div>
</div>
getorders is a callback function used to get table data using ajax request
CODE:
function getorders(callback) {
var data = {};
$.ajax({
url: "home/get_orders",
type: "POST",
data: "",
dataType: "html",
success: function(response) {
var jsonarray = $.parseJSON(response);
callback(jsonarray);
}
});
}
Like I said on desktops and laptops works fine, not sure about tables but on mobiles (androids) not working.
Maybe its window.location.href = "orders/display/"+key; not working on mobiles. I have tried adding return false below it didn't helped.
Any suggestions?
Related
I'm using thyme leaf. I have a table that displays dynamic records. I have tried 2 approaches to display the records, but the values are not binding.
Approach - 1
Using JQuery
$().ready(function () {
getTableDetails();
});
function getTableDetails() {
try {
var ajaxCall;
ajaxCall = $.ajax({
url: /getTableDetails
type: 'GET',
async:false,
dataType: 'json'
});
ajaxCall.done(function (data, textStatus, jqXHR) {
alert(JSON.stringify(data));
$.each(data, function (i, p) {
$('#details').append($('<tbody></tbody>').val(p).html(p));
});
});
ajaxCall.fail(function (jqXHR, textStatus, errorThrown) {
// handle failure cases
alert(textStatus+errorThrown);
});
} catch (e) {
}
}
HTML File
<table class="indi-data-table__table">
<thead>
<tr>
<th scope="col" class="datatable-column-width125" role="columnheader">
<div class="indi-data-table__column-heading">ID</div>
</th>
<th scope="col" class="datatable-column-width150" role="columnheader">
<div class="indi-data-table__column-heading">NAME</div>
</th>
</tr>
</thead>
<tbody id="details">
<tr th:each="row : ${tableDetailList}">
<td th:text="${row.id}"/>
<td th:text="${row.name}"/>
</tr>
</tbody>
</table>
Approach - 2
Using Model getAttribute from Java
#RequestMapping(value = "/getTableDetails", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
public List<DataEntity> getTableDetails(Model model) throws JsonProcessingException {
List<DataEntity> tableDetailList = new ArrayList<>();
try {
tableDetailList.addAll(repoCall);
} catch (Exception ex) {
ex.getCause().printStackTrace();
}
model.addAttribute("tableDetailList", tableDetailList);
return tableDetailList;
}
I have also tried
<tr th:each="row : ${tableDetailList}">
<td th:text="${row.getId()}"/>
<td th:text="${row.getName()}"/>
</tr>
But, none of them is actually binding the values, I am getting the response from the API.
Any help is much appreciated.
Thank you!
Well, I'm trying to do something for the job, where I need a Table made with the DataTables library to be constantly updating, for example, every 10 seconds.
I'm facing very boring problems, what I'm trying to do is give a Reload on API, as described on the official website here: https://datatables.net/reference/api/ajax.reload()
I'm using this:
function AutoReload1()
{
var table = $('#OperationFix').DataTable({
ajax: "data.json"
});
setInterval(function () {
table.ajax.reload();
}, 5000);
//loadOrdersFix();
//alert('Testing')
}
Then it returns the following error to me:
DataTables warning: table id=OperationFix - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
Your code seems to be fine.
But error which you mentioned occurs when AutoReload1(); is called again somehow after its already loaded.
To resolve that you need to either add destroy: true or find out why AutoReload1() is called multiple times.
function AutoReload1()
{
var table = $('#OperationFix').DataTable({
ajax: "data.json",
destroy: true
});
setInterval(function () {
table.ajax.reload();
}, 5000);
}
Working Fiddle
Edit 1:
As per your fiddle, you have defined Datatable 2 places so add destroy:true on both place
var table = $(OperationFixTableId).DataTable({
dom: 'Bfrtip',
pageLength: 1000,
columns: columns,
data: OperationFix,
destroy: true
HTML:
<div class="container">
<table id="OperationFix" class="display" width="100%">
<tfoot>
<tr>
<th style="text-align:right"></th>
<th style="text-align:right"></th>
<th style="text-align:right"></th>
<th style="text-align:right"></th>
<th style="text-align:right"></th>
<th style="text-align:right"></th>
<th style="text-align:right"></th>
<th style="text-align:right"></th>
</tr>
</tfoot>
</table>
</div>
JS:
var OperationFixTableId = $('#OperationFix');
var refreshIntervalId = setInterval;
function AutoReload1()
{
var OperationFixTableId = $('#OperationFix').DataTable({
ajax: 'data.json',
destroy: true
});
setInterval(function () {
OperationFixTableId.ajax.reload();
}, 5000);
}
function AutoReload() {
var checkbox = document.getElementById('myonoffswitch');
if (checkbox.checked == true)
{
AutoReload1();
}
if (checkbox.checked == false)
{
clearInterval(refreshIntervalId);
}
}
I'm currently trying to do this, but when I test it I see that he tries to load my DataTable with 'data.json' what I'd like him to do is load it with what he has in the bank as I could do this, my connection is here:
function GetOrdersFix(startDate, endDate, status, type, onSuccess, onError) {
var uri = executionContext.settings.GetOrdersFix;
var data = {
startDate: new Date(startDate).toJSON(),
endDate: new Date(endDate).toJSON()
};
if (status) { data.status = status; }
if (type) { data.type = type; }
console.info('Loading orders fix from ' + uri);
//Call to server API
$.ajax({
type: 'GET',
url: uri,
data: data,
success: function (responseData, status, jqXHR) {
onSuccess(responseData);
},
error: function (jqXHR, status, errorThrown) {
onError(status + ',' + errorThrown + ',' + jqXHR.responseText);
}
});
}
Below is the view modal where I am getting the ajax response and load to the obserable value.
var userManagementVM = {
responseSetUpData: ko.observable({
userList: ko.observable(),
userListViewModel: ko.observableArray(),
MeetingId: ko.observable(),
MeetingTypeId: ko.observable(),
MeetingType: ko.observable()
}),
SetListOfUserInRoles: function () {
var self = this;
var ajaxUrl = ApplicationRootUrl("UserRoleManagement", "UserManagement");
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: ajaxUrl,
dataType: "json",
success: function (data) {
self.responseSetUpData(data);
console.log(self.responseSetUpData())
},
error: function (err) {
}
});
}
}
$(document).ready(function () {
ko.applyBindings(userManagementVM, document.getElementById("rightdash-container"));
userManagementVM.SetListOfUserInRoles();
});
The response from the ajax is successfully loaded to the obserable value. Below is the output of the console
HTML code
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Users</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody data-bind="foreach: responseSetUpData.userListViewModel">
<tr>
<td><input class="form-check-input" type="checkbox" data-bind="checked: SelectedUser"><span data-bind="text: $data.FirstName"></span></td>
<td><select data-bind="options: $data.Roles,optionsText: 'Name',value: $data.SelectedRoleId,optionsCaption: '-- Select Role --'"></select></td>
</tr>
</tbody>
</table>
The value is not bind to the UI.
You need to get the value of the observable - responseSetUpData() in the binding:
<tbody data-bind="foreach: responseSetUpData().userListViewModel">
Otherwise you are trying to get userListViewModel from the observable function object :-)
I'm server side I want to add a checkbox who returns true or false when the checkbox is checked or not. But I don't know how to add the event on change to my checkbox in the table and send the Boolean to my data. And I want to set the checkbox next to the global search.
HTML
<table id="searchlog" class="table table-striped table-bordered" cellspacing="0" width="100%">Case Sensitive :
<input type='checkbox' id='idCaseSensitive' />
<thead>
<tr>
<th>COL1</th>
<th>COL2</th>
<th>COL3</th>
<th>COL4</th>
<th>COL5</th>
<th>COL6</th>
<th>COL7</th>
<th>COL8</th>
</tr>
</thead>
<tbody></tbody>
</table>
JQUERY
$(document).ready(function () {
$('#searchlog').DataTable({
serverSide: true,
aaSorting: [
[1, 'desc']
],
ajax: {
url: '/mypath/...',
method: 'POST',
data: {
caseSensitive: true // I want the checkbox's return on this parameter
}
}
});
$('#idCaseSensitive').change(function (data) {
if (this.checked) {
return true;
} else {
return false;
}
});
});
Could you help me to do that please?
$(document).ready(function () {
var flag=false;
$('#idCaseSensitive').change(function (data) {
if ($(this).attr("checked")==true) {
flag=true;
} else {
flag=false;
}
});
$('#searchlog').DataTable({
serverSide: true,
aaSorting: [
[1, 'desc']
],
ajax: {
url: '/mypath/...',
method: 'POST',
data: {
caseSensitive: flag; // I want the checkbox's return on this parameter
}
}
});
});
I solved my issue with a function who returns the flag variable and I use it in the data caseSensitive.
I've got implemented ng-table with an ajax call but never call the function from getdata, the function onBuscarTable is never call, I've look at the debbugger console to check it and dosen't call it:
what i'm doing whrong?
here's the js:
$scope.onBuscarTable = function ($defer, params) {
$.ajax({
type: 'GET',
url: '/Home/GetEfficiencyDetails',
cache: false,
contentType: 'application/json; charset=utf-8',
//data: JSON.stringify({ title: "fghfdhgfdgfd" }),
success: function (data) {
$scope.items = data;
$defer.resolve(data);
}
});
};
//$scope.getEffiencyDetails();
$scope.tableBuscar = new ngTableParams({
page: 1, // show first page
count: $scope.items.length, // hides pager
sorting: {
name: 'asc' // initial sorting
}
}, {
counts: [], // hides page sizes
getData: $scope.onBuscarTable
});
$scope.tableBuscar.reload();
and here is the html:
<table ng-table="tableBuscar" show-filter="true" class="table table-striped table-bordered table-condensed table-hover">
<tbody>
<tr>
<th colspan="5">Battery Life</th>
<th colspan="4">SBC</th>
<th colspan="3">ZBC</th>
<th>Overall</th>
</tr>
<tr>
<th>Pool #</th>
<th>True Cap.</th>
<th>Util.</th>
<th>Load Sharing</th>
</tr>
<tr ng-repeat="item in items">
<td>{{item.PoolName}}</td>
<td>{{item.AvgTrueCapacity}}</td>
<td>{{item.AvgEnergyUsageDaily}}</td>
</tr>
</tbody>
</table>
You code should using $http instead of $.ajax
$scope.items = [];
$scope.onBuscarTable = function($defer, params) {
$http.get('/Home/GetEfficiencyDetails').success(function(data) {
$scope.items = data;
$defer.resolve(data);
});
};
//$scope.getEffiencyDetails();
$scope.tableBuscar = new ngTableParams({
page: 1, // show first page
count: $scope.items.length, // hides pager
sorting: {
name: 'asc' // initial sorting
}
}, {
counts: [], // hides page sizes
getData: $scope.onBuscarTable
});
$scope.tableBuscar.reload();