Good Morning,
I am new to coding and self learner. Currently working on project where need to add datatable.
Need to add space between search / show --- Entries button and actual table. Below is my code for the table
$('#paymentbalancetable').DataTable({
pageLength: 3,
lengthMenu: [
[3, 5, 10, 20, -1],
[3, 5, 10, 20, 'All']
],
paging: true,
lengthChange: true,
searching: false,
ordering: true,
order: [[0, 'asc']],
info: false,
autoWidth: false,
responsive: true,
'columnDefs': [{
"targets": 0,
"className": "text-center",
},
{
"targets": 1,
"className": "text-center",
},
{
"targets": 2,
"className": "text-center",
},
{
"targets": 3,
"className": "text-center",
},
],
});
html code
<table id="paymentbalancetable" class="table table-bordered table-hover table" style="width:100%">
<thead>
<tr>
<th>Month</th>
<th>Name</th>
<th>Flat No</th>
<th>Amount</th>
</tr>
<tbody>
<tr>
<td>Dec-22</td>
<td>XYX</td>
<td>M1-101</td>
<td>2000</td>
</tr>
</tbody>
</thead>
</table>
Ref. Attached Image
Related
I am getting wrong data when I called a incremental method in vue3 in v-for loop.
My code is given below, here I could have used index+100 but I need like this, this is the sample version of my original code. A screenshot is given after the code, see the console log the counter is more then I expected, also index started with 605 but it should 100
<template>
<table border="1" style="border-collapse: collapse">
<thead><tr><th></th><th>Name</th><th>Username</th><th>Email</th></tr></thead>
<tbody>
<tr :key="index" v-for="(rowitem,index) in table_data.items">
<td>{{getRowIndex()}}</td> <td>{{ rowitem.name }}</td> <td>{{ rowitem.username }}</td> <td>{{ rowitem.email }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: 'App',
data() {
return {
start_row_ind: 100,
table_data: {
items: [
{"name": "Leanne Graham", "username": "Bret", "email": "Sincere#april.biz",},
{"name": "Ervin Howell", "username": "Antonette", "email": "Shanna#melissa.tv",},
{"name": "Clementine Bauch", "username": "Samantha", "email": "Nathan#yesenia.net"},
{"name": "Patricia Lebsack", "username": "Karianne", "email": "Julianne.OConner#kory.org"},
{"name": "Chelsey Dietrich", "username": "Kamren", "email": "Lucio_Hettinger#annie.ca"},
]
}
}
},
methods: {
getRowIndex(){
console.log(this.start_row_ind);
return this.start_row_ind++;
}
}
}
</script>
Output screenshot is
Please advice me how can I fix this issue, I have to use this method getRowIndex
Try without method, just add index in template, or you can pass index to your method:
new Vue({
el: "#demo",
data() {
return {
start_row_ind: 100,
table_data: {
items: [
{"name": "Leanne Graham", "username": "Bret", "email": "Sincere#april.biz",},
{"name": "Ervin Howell", "username": "Antonette", "email": "Shanna#melissa.tv",},
{"name": "Clementine Bauch", "username": "Samantha", "email": "Nathan#yesenia.net"},
{"name": "Patricia Lebsack", "username": "Karianne", "email": "Julianne.OConner#kory.org"},
{"name": "Chelsey Dietrich", "username": "Kamren", "email": "Lucio_Hettinger#annie.ca"},
],
},
items2: [
{"name": "Leanne Graham", "username": "Bret", "email": "Sincere#april.biz",},
{"name": "Ervin Howell", "username": "Antonette", "email": "Shanna#melissa.tv",},
{"name": "Clementine Bauch", "username": "Samantha", "email": "Nathan#yesenia.net"},
{"name": "Patricia Lebsack", "username": "Karianne", "email": "Julianne.OConner#kory.org"},
{"name": "Chelsey Dietrich", "username": "Kamren", "email": "Lucio_Hettinger#annie.ca"},
]
}
},
methods: {
getRowIndex(i){
return this.start_row_ind + i;
},
addRows() {
this.table_data.items.push(...this.items2)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<table border="1" style="border-collapse: collapse">
<button #click="addRows">add rows</button>
<thead><tr><th></th><th>Name</th><th>Username</th><th>Email</th></tr></thead>
<tbody>
<tr :key="index" v-for="(rowitem,index) in table_data.items">
<td>{{ getRowIndex(index) }}</td> <td>{{ rowitem.name }}</td> <td>{{ rowitem.username }}</td> <td>{{ rowitem.email }}</td>
</tr>
</tbody>
</table>
</div>
Datatables allows you to use shift+select, while also allowing you to select single items without losing previously selected items by having the select style set to multi+shift.
'select': {style': 'multi+shift'}
However, for this datatable, that doesn't seem to work at all. What am I missing?
var $testTable = $("#test-list").DataTable({
"dom": '<"dataTables_top"i<"dataTables_custom_buttons">f>rt'+ '<"dataTables_bottom"ilp>',
"autoWidth": false,
"lengthChange": 100,
"lengthMenu": [[10, 25, 100, 200, 500, 1000], [10, 25, 100, 200, 500, 1000]],
"paging": true,
"pagingType": "full_numbers",
"stripeClasses": [ 'odd', 'even' ],
"order": [[1, 'asc']],
"language": {
"emptyTable": '<h3>Test...</h3>',
"search" : '',
"sLengthMenu" : "_MENU_ Per Page",
"info": "Showing _START_ to _END_ of _TOTAL_",
paginate: {
first: '<i class="fad fa-step-backward"></i>',
previous: '<i class="fad fa-backward"></i>',
next: '<i class="fad fa-forward"></i>',
last: '<i class="fad fa-step-forward"></i>'
}
},
'select': 'multi+shift',
"aoColumnDefs": [
{
"targets": [-1,-2,-3,-4,-5,-6,-7,-8,-9,-11],
'searchable': false
},
{
"targets": 'no-sort',
"orderable": false,
},
{
"targets": [8,11],
"visible": false
},
{
"iDataSort": 8,
"aTargets" : [7]
},
{
"iDataSort": 11,
"aTargets" : [10]
},
{
"targets": -1,
'searchable': false
}
],
"initComplete": function() {
......
},
"drawCallback": function(settings) {
......
}
});
I'm unable to figure out how to loop through the array in the code I'm working on.
I want the table row to display once not thrice.
new Vue({
el: '#app',
data: {
a: {
b:[
{ c: [ {d: "1"}, {d: "2"}, {d: "3"} ] },
{ c: [ {d: "1"}, {d: "2"}, {d: "3"} ] },
{ c: [ {d: "1"}, {d: "2"}, {d: "3"} ] }
]
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<table>
<thead>
<tr v-for="b in a.b">
<th v-for="c in b.c">{{c.d}}
</th>
</tr>
</thead>
</table>
</div>
https://jsfiddle.net/xe8w1q4u/
Well, if you just want to display the first row:
new Vue({
el: '#app',
data: {
a: {
b:[
{ c: [ {d: "1"}, {d: "2"}, {d: "3"} ] },
{ c: [ {d: "1"}, {d: "2"}, {d: "3"} ] },
{ c: [ {d: "1"}, {d: "2"}, {d: "3"} ] }
]
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<table>
<thead>
<tr v-if="a.b.length > 0">
<th v-for="c in a.b[0].c">
{{c.d}}
</th>
</tr>
</thead>
</table>
</div>
I'm trying to use a vue.js component to display the following data (in a vue instance) as a table.
But I not sure how to access the data. I tried nested v-for loops.
OUTPUT TABLE
Equp Name | Service Time
Mill Saw | 2018-02-01 10:00:00
Mill Saw | 2018-02-04 10:00:00
Equp Name | Service Time
Jack Hammer | 2018-02-06 12:30:00
VUE COMPONENT
Vue.component('services', {
props: ['value'],
template: '<div>{{value.serviceTime}}</div>'
})
new Vue({
el: '#mydemo1',
data: {
"results": {
"4": [
{
"service": 4,
"serviceTime": "2018-02-01 10:00:00",
"usrname": "chris job",
"eqname": "mill saw",
"quantity": "3.00",
"rate": "20.00",
"total": "60.00",
"note": ""
},
{
"service": 4,
"serviceTime": "2018-02-04 10:00:00",
"usrname": "chris job",
"eqname": "mill saw",
"quantity": "3.00",
"rate": "20.00",
"total": "0.00",
"note": null
}
],
"34": [
{
"service": 34,
"serviceTime": "2018-02-06 12:30:00",
"usrname": "chris job",
"eqname": "jack hammer",
"quantity": "0.00",
"rate": "20.00",
"total": "0.00",
"note": "Training"
}
]
HTML
div id="mydemo1">
<services v-for="invoice in results"
v-for="items in invoice"
v-for="details in items"
v-bind:value="invoice"
></services>
Suggestions?
You can do
<table v-for="(invoices, key) in results" :key="key">
<tr>
<th>Equp Name</th>
<th>Service Time</th>
</tr>
<tr v-for="item in invoices" :key="item.serviceTime">
<td>{{ item.eqname }}</td>
<td>{{ item.serviceTime }}</td>
</tr>
</table>
You can check my demo at https://codepen.io/ittus/pen/erMRNL
You should do it in this fashion
<div id="mydemo1">
<services v-for="invoice in results"
v-for="items in invoice">
<div v-for="details in items">Do your stuff ....</div>
</services>
</div>
Yes you can nest v-for loops but you have to put them inside different elements (as div for example)
Btw, you don't need 3 v-for loops to display you data the way you want :
Vue.component('services', {
template: '<div style="display:inline">{{value.serviceTime}}</div>',
props: ['value']
})
new Vue({
el: '#app',
data: {
"results": {
"4": [
{
"service": 4,
"serviceTime": "2018-02-01 10:00:00",
"usrname": "chris job",
"eqname": "mill saw",
"quantity": "3.00",
"rate": "20.00",
"total": "60.00",
"note": ""
},
{
"service": 4,
"serviceTime": "2018-02-04 10:00:00",
"usrname": "chris job",
"eqname": "mill saw",
"quantity": "3.00",
"rate": "20.00",
"total": "0.00",
"note": null
}
],
"34": [
{
"service": 34,
"serviceTime": "2018-02-06 12:30:00",
"usrname": "chris job",
"eqname": "jack hammer",
"quantity": "0.00",
"rate": "20.00",
"total": "0.00",
"note": "Training"
}
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<div v-for="invoice in results">
<div v-for="items in invoice">
<div style="display:inline">{{ items.eqname }} |</div>
<services :value="items"></services>
</div>
</div>
</div>
Example here with a table
data table header moves with the table. i tried adding into my code what the Similar Questions had to offer, and more. Nothing seems to work. Can someone view my code and offer suggestions on how to fix the header row? code:
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/fixedheader/3.0.0/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.css">
<div id="p" class="easyui-panel" title="LP Activity Counts" style="width:1150px;height:500px;padding:0px;">
<table cellpadding="5" cellspacing="0" border="0" id="example" width="100%" class="display">
<thead>
<tr>
<th >FY</th>
<th width="25%">County</th>
<th align="center" style="background-color:white;">Overage</th>
<th align="center" style="background-color:white;">Updated</th>
<th align="center" style="background-color:white;">New</th>
<th align="center" style="background-color:white;">Deleted</th>
<th align="center" style="background-color:white;">Total</th>
<th align="center" style="background-color:white;">Auto</th>
<th align="center" style="background-color:white;">ABS</th>
<th align="center" style="background-color:white;">Needs Fix</th>
<th align="center" style="background-color:white;">Review</th>
<th align="center" style="background-color:white;">Available</th>
<th align="center" style="background-color:white;">FYI</th>
<th align="center" style="background-color:white;">Action</th>
<th align="center" style="background-color:white;">Required</th>
<th align="center" style="background-color:white;">Suspend</th>
<th align="center" style="background-color:white;">Term</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="11" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function() {
var FY = <?php echo $FY; ?>;
var USERID = <?php echo $CMSUserID; ?>
var oTable = jQuery('#example').dataTable( {
"bRetrieve":true,
"bFilter": false,
"bInfo" : false,
"bLengthChange" : false,
"bAutoWidth":true,
"bServerSide": true,
"bPaginate" : false,
"bSort" : false,
"aoColumnDefs": [ { "sClass": "act_counts", "aTargets": [ 2 ] },
{ "sClass": "act_counts", "aTargets": [ 3 ] },
{ "sClass": "act_counts", "aTargets": [ 4 ] },
{ "sClass": "act_counts", "aTargets": [ 5 ] },
{ "sClass": "act_counts", "aTargets": [ 6 ] },
{ "sClass": "approval", "aTargets": [ 7 ] },
{ "sClass": "approval", "aTargets": [ 8 ] },
{ "sClass": "approval", "aTargets": [ 9 ] },
{ "sClass": "submittal", "aTargets": [ 10 ] },
{ "sClass": "submittal", "aTargets": [ 11 ] },
{ "sClass": "flags", "aTargets": [ 12 ] },
{ "sClass": "flags", "aTargets": [ 13 ] },
{ "sClass": "flags", "aTargets": [ 14 ] },
{ "sClass": "flags", "aTargets": [ 15 ] },
{ "sClass": "flags", "aTargets": [ 16 ] },
],
"sAjaxSource": "https://domain/production/dashboard.php",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "FY", "value": FY } );
aoData.push( { "name": "lpid", "value": "1" } );
aoData.push( { "name": "USERID", "value": USERID } );
},
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
{
"sExtends": "csv",
"sButtonText": "Excel"
}, "copy"
]
}
} );
var table = $('#example').DataTable();
new $.fn.dataTable.FixedHeader( table );
} );
Give or take a few settings this should accomplish what you are trying to including fixed header
var oTable = $('#example').DataTable({
"autoWidth": true,
"processing": true,
"serverSide": true,
"sort": false,
"fixedHeader":true,
"columnDefs": [{ "className": "act_counts", "targets": [2,3,4,5,6] },
{ "className": "approval", "targets": [7, 8, 9] },
{ "className": "submittal", "targets": [10, 11] },
{ "sClass": "flags", "aTargets": [12, 13, 14, 15, 16] },
],
"ajax":{url: "https://domain/production/dashboard.php",
"data": function (aoData) {
aoData.extra = [];
aoData.extra.push({ "name": "FY", "value": FY });
aoData.extra.push({ "name": "lpid", "value": "1" });
aoData.extra.push({ "name": "USERID", "value": USERID });
}
},
// from what I see, no paging, no filtering, no paging info and no page length, now all done with the dom
"dom": 'Bt',
"buttons": ["excelHtml5", "copyHtml5"]
});
The DataTable CDN and Download builder gives you the option as doing it as one file link but I listed them individually so you can see what they are. It looked to me that you might have been missing the button includes. I included ones for html5
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>