Jquery DataTables with both horizontal and vertical scroll makes browser unresponsive for just 50 records - datatables

I'm a great fan of JQuery DataTables and I have used this for very long time. Its the best and working fine. But now with my requirement of enabling both horizontal and vertical scroll, the table makes browser unresponsive for few seconds with just 50 records returned from server. I just have this table script and no other in my page.
Here is the HTML,
<div class="page-content">
<section class="card">
<div class="card-body p-0">
<table id="table" class="table table-sm table-bordered mt-0 w-100">
<thead class="text-center"></thead>
</table>
</div>
</section>
</div>
Here is the table script,,
var height = dynamically calculated,
table = $('#table').DataTable({
serverSide: true,
autoWidth: true,
language: {
processing: "Loading...",
zeroRecords: "No matching records found"
},
processing: true,
deferRender: true,
scrollX: true,
scrollY: height,
scrollCollapse: true,
order: [],
dom: '<tr>',
ajax: {
type: "POST",
url: "server url",
contentType: "application/json; charset=utf-8",
headers: {
"XSRF-TOKEN": $('#_AjaxAntiForgeryTokenForm input[name="__RequestVerificationToken"]').val()
},
global: false,
async: true,
data: function (data) {
return JSON.stringify(data);
}
},
columns: [
{
title:"",
data: "",
render: function(){
},
name: ""
}
//... 19 more columns
],
drawCallback: function (settings) {
var count = table.data().count();
$('.data-table-disable').prop('disabled', !(count > 0));
$('#spanResultsCount').text(count);
$('section.card').height(height + 27);
}
});
I'm using Jquery Datatables 1.10.18. If I comment the scrollX,scrollY and scrollCollapse properties and run, now horizontal and vertical scroll appears at browser level and there isn't any lag or unresponsiveness.
I followed their docs and found this,
https://datatables.net/examples/basic_init/scroll_xy.html
Any ideas on where I'm going wrong?

After doing a lot research and googling I found that adding paging: false in the DataTable Initialization fixed the issue. Hope this helps some one. :)

Related

Initializing checkboxes in vue-bootstrap b-table rows

I am working on a page using vue-bootstrap that has a b-form-checkbox-group embedded in each row. Those are appearing fine. The problem comes when I try to assign values to the checked prop. When i assign a static number the boxes will be checked like they should be when the page loads but when I try to set it up to receive responses from jquery get calls the boxes are only sometimes filled with no pattern as far as I can see.
<nit-card :title="host">
<b-table
:items="interfaceNames"
:fields="switch_interface_config_col_names">
<template slot="tagged" slot-scope="row">
<b-form-checkbox-group :options="vlans"
:checked="interfaceNames[row.index].taggedVlans"
stacked>
</b-form-checkbox-group>
</template>
<template slot="untagged" slot-scope="row">
<b-form-radio-group :options="vlans"
:checked="interfaceNames[row.index].untaggedVlans"
stacked>
</b-form-radio-group>
</template>
</b-table>
</nit-card>
Above is the html for the table. nit-card is a vue.component that looks like this.
Vue.component('nit-card', {
props: ['title'],
template: `
<div class="card">
<div class="card-header">
<h2 class="card-title">{{ title }}</h2>
</div>
<div class="card-body">
<slot></slot>
</div>
</div>
`
})
And some of the js code with an exmaple of ine of the methods that are called to get the data for the checked prop.
let generic_name = new Vue({
el: '#generic_name',
data: function(){
return{
interfaceNames: [],
vlans: [],
switch_interface_config_col_names: [
{key: "interfaceName", sortable: true},
{key: "description", sortable: false},
{key: "tagged", sortable: false},
{key: "untagged", sortable: false},
],
submit_params: [
["Switch", "text", "Hostname or IP", true],
["Interface", "text", "Interface Name", true],
],
host: "",
}
},
methods: {
getTagged: function(){
let that = this
for(let i = 0; i < that.interfaceNames.length; i++){
let url_encoding_re = /\//g;
let interfaceName = that.interfaceNames[i].interfaceName.replace(url_encoding_re, '%5c')
$.get(api_url + "/switches/" + that.host + "/interfaces/" + interfaceName + "/vlans/tagged", function(response) {
console.log(response)
that.interfaceNames[i].taggedVlans = response.vlans
})
}
},
}
The way that I imagine it flowing is that the interfaceNames array stores the data and then it is accessed by the html using the row.index value. What is actually happening is that maybe half of the checkbox forms have the checked values in their checked prop even though when I look at the root vue the values are present in interfaceNames[x].taggedVlans.
What do i need to do to have the checked prop filled consistently for these check-box-groups?
EDIT: By toggling the table with a v-if manually (Ex a button after the table renders) all of the checkboxs will appear correctly. Once I have a reliable way to toggle automatically the table I will post it here.
The issue came from how i was adding the objects to the interfaceNames array. Vue.js cant detect changes made to arrays when you directly set the value through the index. To make the array reactive use Vue.set(this.arrayName, indexValue, new value) (as seen here https://v2.vuejs.org/v2/guide/list.html#Caveats)
For this specific example above Vue.set(that.interfaceNames, i, {key: value, key: value, ...}) worked. Since it was done in a loop for all the values of the array the entire array was made reactive.

How do I pass a value of a dropdown as a parameter in jquery datatables ajax?

i have a dropdown in mvc view- where the value that is selected is to be sent as a paramater in the ajax call of jquery datatables. I am not sure what the right syntax is. Here is snippet my currrent code:
#using (Html.BeginForm())
{
<p>
#Html.DropDownList("StatusType", "Select a Value")
</p>
<p>
Find by Keyword or Phrase in Heading Or Description: #Html.TextBox("SearchString")
</p>
<p>
<input type="submit" value="Search" />
</p>
}
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
if ($.fn.DataTable.isDataTable('#tblsr')) {
$('#tblsr').dataTable().fnDestroy();
$('#tblsr').dataTable().empty();
}
var complete = $('#tblsr').DataTable(
{
"serverSide": true,
"destroy": true,
"processing": true,
"stateSave": true,
"ajax":
{
url: "/ServiceRequests/SRList",
method: "POST",
"data": { "StatusType": StatusType}
},
What is the appropriate syntax for the line under method: POST? If I hardcode in "Open" or "closed' instead of StatusType, the datatables does filter properly, so the value is properly passed, so I just dont know what the appropriate syntax to refer to the dropdown value...
Thanks
figured it out :
var complete = $('#tblsr').DataTable(
{
"serverSide": true,
"destroy": true,
"processing": true,
"stateSave": true,
"ajax":
{
url: "/ServiceRequests/SRList",
method: "POST",
"data": {
"StatusType": $("#StatusType").val()
//"StatusType": "Open"
}
},

get data of slected row in vue good table

guys, I m new to vue so don't know how to achieve following situation
how i can get data of current selected row
here is code
<div class="table-responsive-sm">
<vue-good-table
title="Page List"
:columns="columns1"
:rows="rows1"
:paginationOptions="{enabled: false}">
<template slot="table-row-after" slot-scope="props" >
<td class="fancy"><input type="checkbox" v-model="checkview[props.row.originalIndex]">
</td>
<td class="has-text-right"><input type="checkbox" v-model="checkedit[props.row.originalIndex]"></td>
<td class="has-text-right"><input type="checkbox" v-model="checkupate[props.row.originalIndex]"></td>
<td class="has-text-right"><input type="checkbox" v-model="checkdelete[props.row.originalIndex]"></td>
</template>
</vue-good-table>
columns1: [
{
label: 'Page Name',
field: 'pagename',
sortable: false,
},
{
label: 'View',
sortable: false,
},
{
label: 'edit',
sortable: false,
},
{
label: 'update',
sortable: false,
},
{
label: 'delete',
sortable: false,
},
],
rows1:[],
methods:{
getTotals1(){
var self = this;
this.$http.get('http://localhost:3000/api/permissionpgs')
.then(function (response) {
console.log(response.data)
self.rows1 = response.data;
})
},
}
is there any way to get data of value when save method got trigger. last ting this is vue good table
you're storing the values of checked items in 3 different objects. checkedit, checkupdate and checkdelete. If the user checks/unchecks your checkboxes in the table. These objects will have the following form:
checkupdate{
2: true, // index of the row: whether checked or unchecked
5: false,
20: true
}
now to get the rows for each of these objects all you have to do is loop through the object properties, collect the index that has value as true. then do this.rows1[index] to get the actual row object.

Adding date to pdf export in Kendo UI

This is my first time using this website. Today is my debut into Kendo UI. My boss has bought it, and set me on it with high hopes! I absolutely love it if I'm honest but I have got stuck on an issue, I have Googled every possible search phrase but can't seem find a resolve. So I'm going to post this request and go to bed, hoping for the best. I'd have had my first task done in a day if it wasn't for this niggle :/
I'm looking to add the date to a PDF export in Kendo UI.
Here is my code...
$("#grid").kendoGrid({
toolbar: ["excel", "pdf"],
excel: {
fileName: "FlexibleSalesReport-"+ fileNameDate + ".xlsx",
proxyURL: "//demos.telerik.com/kendo-ui/service/export",
filterable: true
},
pdf: {
allPages: true,
avoidLinks: true,
paperSize: "A4",
margin: { top: "2cm", left: "0.5cm", right: "0.5cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
template: $("#page-template").html(),
scale: 0.6,
date: new Date(),
title: 'My Title',
subject: 'My subject'
},
dataSource: {
//type: "odata",
// transport: {
// read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
// },
data: products,
schema: {
model: {
fields: {
Name: { type: "string" },
WebName: { type: "string" },
Code: { type: "string" },
Icing: { type: "string" },
Filling: { type: "string" },
AssociatedOrderingPage: { type: "string" },
Sold: { type: "number" },
TotalValue: { type: "string "}
}
}
},
pageSize: 10,
serverPaging: false,
serverFiltering: false,
},
height: 980,
filterable: {
mode: "row"
},
pageable: true,
sortable: true,
columns:
['Data removed for brevity']
});
I have added the date option, I'm not sure where to pull that option out of in the template. Below is my code for the template. Because it is in script tags, I cannot call functions or inject data into the span tags to add a date to the end of the of the pdf title.
<script type="x/kendo-template" id="page-template">
<div class="page-template">
<div class="header">
<div style="float: right">Page #: pageNum # of #: totalPages #</div>
########### Sales Report - <span id="thisOne"></span><!-- I'd like to inject into this span, even this comment isn't commented out in my IDE {VS Code}
</div>
<div class="watermark">#####</div>
<div class="footer">
Page #: pageNum # of #: totalPages #
</div>
</div>
</script>
The intended result
Thanks in advance and though I've read through the do's and don'ts. I'm open to constructive criticism on my addition
Okay. So after more research. I found the solution which I'll share with you guys.
To define any custom Javascript in the template, you must add it between hash tags (pound signs to some people).
For example:
# var foo = "bar"; #
Then to print the variable to the report, you use the following syntax:
#= foo #
The solution to my problem was replacing the template section with
<script type="x/kendo-template" id="page-template">
#
var theDate = new Date();
#
<div class="page-template">
<div class="header">
<div style="float: right">Page #: pageNum # of #: totalPages #</div>
[Obfuscated for client privacy] Flexible Sales Report - <span>#=theDate#</span>
</div>
<div class="watermark">[Obfuscated for client privacy]</div>
<div class="footer">
Page #: pageNum # of #: totalPages #:
</div>
</div>
</script>
I sincerely hope this helps someone.

adding button on column template of kendo grid

I am building an app using MVC using Jquery(KendoGrid) for displaying data, everything was working fine as per requirement, later we planned to add extra column with button present on each row of the grid, sounds simple, but tried number of ways to add into the application, getting error message "undefined 'node' ..... ", so i had no other options rather than posting here, if any one could able to help me in this will be appreciative, and i used column template on jquery kendo grid thanks
scenario
onclick of that button in specified row it should carry "ID(as shown below)" and redirect to "ActionResult" Controller, where I can further code as per my requirement
code(part of the code)
columns: [
{ field: "ID", Title: "ID", filterable: false, sortable: false, hidden: true },
{ field: "RowID", Title: "RowID", filterable: false, sortable: false, hidden: true },
{ field: "BillNumber", Title: "BillNumber", filterable: false, sortable: false,hidden:true },
{ field: "ServiceName", Title: "ServiceName",width:600 },
{ field: "ServiceStatus", Title: "ServiceStatus", width: 150 }
// Creating template column
, {
field: "Action", title: "Is Action", template: "<input type=\"checkbox\" #= Action ? checked='checked' : '' # class=\"check_row\"/> ", editable: false,
// field: "Action",title: "Preview ", template: '<input type="button" class="info" name="info" value="Info" style="height: 26px; margin: 0px 2px; min-width: 64px;" />',
headerTemplate: '<label> <input type="checkbox" id="checkAll"/>Print All</label>', filterable: false, sortable: false, width: 100,
}
currently I am able to generate checkbox in column, what i need is one more column with button(same as checkbox in each row)
Manjuboyz
Defining a button in a cell is pretty simple... basically you were doing it right.
Example: Define a column as:
columns: [
...
{
title: "Preview ",
template: '<input type="button" class="k-button info" name="info" value="Info" />',
headerTemplate: '<label> <input type="checkbox" id="checkAll"/>Print All</label>',
filterable: false,
sortable: false,
width: 100
}
]
Define the template as an input of type button. If you want it to look like a Kendo UI button add k-button class to it.
Then, you can bind a click handler doing:
$(".info").on("click", function() {
var row = $(this).closest("tr");
var item = grid.dataItem(row);
...
});
Where item contains all the data corresponding to the row that you clicked the button.
Running example here : http://jsfiddle.net/m8fsv/1/
EDIT: If what you need is to control / decide showing one or the other, you should change the template to something like:
<script id="template" type="text/kendo-template">
# if (showButton) { #
<input type="checkbox" #= data.Action ? checked="checked" : "" # class=\"check_row\"/>
# } else { #
<input type="button" class="k-button info" name="info" value="Info" />
# } #
</script>
You can check it here: http://jsfiddle.net/OnaBai/m8fsv/12/