I need multi-lines header in this scenario:
the fist line is level 1 header, the second line is level 2, like this pic:
multi-lines header
Thanks!
Core code
<v-data-table :headers="surgeryInformationHeaders" :items="surgeryInformationDesserts" hide-default-footer class="transparent elevation-0 my-4" hide-default-header disable-pagination disable-sort :items-per-page="5">
<template #header="{ }">
<thead class="v-data-table-header">
<tr>
<th v-for="(h,i) in surgeryInformationHeaders" :key="i" class="text-center parent-header td-border-style" :rowspan="h.children?1:2" :colspan="h.children?h.children.length:1">
{{ h.text }}
</th>
</tr>
<tr>
<th v-for="(h1,i1) in getSubHeader(surgeryInformationHeaders)" :key="i1" class="text-center child-header td-border-style">
{{ h1.text }}
</th>
</tr>
</thead>
</template>
<template #item="props">
<tr>
<td v-for="(c,ci) in getRows(props.item)" :key="ci">
{{ c }}
</td>
</tr>
</template>
</v-data-table>
Here's codeopen link https://codepen.io/sunhao1256/pen/MWeZyMe
By adding a child to the header you could implement multi-line header in v-data table.
headers: [
{
text: 'Film Title',
align: 'center',
sortable: false,
value: 'film',
},
{ text: 2018, value: 'dec', sortable: false, align: 'center',child:["December"] },
{ text: 2019, value: 'jan', sortable: false, align: 'center',child:["January","February"] }
],
you could visit this link for the sample output:
https://codepen.io/nicemid/pen/ZwXmeq
Related
I have data on table using Model View Controller :
controller :
<tbody>
#php
$no=0;
#endphp
#foreach ($pns as $i)
<tr class="even pointer">
<td class="a-center ">{{ ++$no }}</td>
<td class=" ">{{ $i->users->nama}}</td>
<td class=" ">{{ $i->NIP_lama}}</td>
<td class=" ">{{ $i->NIP_baru}}</td>
<td class=" ">{{ $i->TMT_CPNS}}</td>
<td class=" ">{{ $i->TMT_PNS}}</td>
<td class=" ">{{ $i->TMT_gol_ruang}}</td>
<td class=" ">{{ $i->master_golongan->golongan}}</td>
<td class=" ">{{ $i->master_jabatan->nama_jabatan}}</td>
</tr>
#endforeach
</tbody>
And the Controller :
public function pns() {
$pns = Data_pns::with('users')->get();
return view('admin.pns',['pns' => $pns]);
}
its run normally and not having error . now I want to add datatables yajra yajra feature , and it has 1 problem . I dont know how to add link :
<td class=" ">{{ $i->users->nama}}</td>
on the datatables :
My View :
#push('scripts')
<script>
$(function() {
$('#table').DataTable({
processing: true,
serverSide: true,
responsive: true,
ajax: '{!! route('d_pns') !!}',
columns: [
{ data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false},
{ data: 'users.nama', name: 'users.nama'},
{ data: 'NIP_lama', name: 'NIP_lama'},
{ data: 'NIP_baru', name: 'NIP_baru'},
{ data: 'TMT_CPNS', name: 'TMT_CPNS'},
{ data: 'TMT_PNS', name: 'TMT_PNS'},
{ data: 'TMT_gol_ruang', name: 'TMT_gol_ruang'},
{ data: 'master_golongan.golongan', name: 'master_golongan.golongan'},
{ data: 'master_jabatan.nama_jabatan', name: 'master_jabatan.nama_jabatan'},
],
});
})
</script>
#endpush
and my controller like this :
public function indexDataTables_pns()
{
$pns = Data_pns::with('users','master_golongan','master_jabatan')->get();
return Datatables::of($pns)->addIndexColumn()
->make(true);
}
edited this controller
and my controller like this :
public function indexDataTables_pns()
{
$pns = Data_pns::with('users','master_golongan','master_jabatan')->get();
return Datatables::of($pns)->addIndexColumn()
->addColumn('Nama', function ($pns) {
return ''.$pns->users->nama.'';
})
->make(true);
}
but this output in view " <#a href="project/pns/5">test" with out #
my Question how to add link like
<td class=" ">{{ $i->users->nama}}</td>
on datatbles ?
you already halfway there, you need to set the 'Nama' columns as raw, if you're returning an html content like this
public function indexDataTables_pns()
{
$pns = Data_pns::with('users','master_golongan','master_jabatan')->get();
return Datatables::of($pns)->addIndexColumn()
->addColumn('Nama', function ($pns) {
return ''.$pns->users->nama.'';
})
->rawColumns(['Nama'])
->make(true);
}
Currently I fill the following table:
<v-data-table
:headers="headers_detInventario"
:items="detalle_inventario"
:search="search"
:rows-per-page-items="rowsPerPageItems"
:pagination.sync="pagination"
class="elevation-1"
no-data-text="No hay registros"
>
<template v-slot:items="props">
<td class="text-xs-center">{{ props.item.nombre }}</td>
<td class="text-xs-center">{{ props.item.cantidad }}</td>
<td class="text-xs-center">{{ props.item.precio }}</td>
<td class="text-xs-center">{{ props.item.codigo }}</td>
<td class="text-xs-center">{{ props.item.descuento }}</td>
<td class="text-xs-center">{{ props.item.total_fila }}</td>
</template>
</v-data-table>
and the header is filled in the following way:
headers_detInventario:[
{
text: 'Fecha',
align: 'left',
value: 'fecha'
},
{ text: 'Detalle', value: 'detalle'},
{ text: 'Valor unitario', value: 'valor_unitario' },
{ text: 'Entrada', value: 'entrada', colspan: '2'
},
{ text: 'Cantidad', value: 'cantidad' },
{ text: 'Acciones', value: 'name', sortable: false }
],
Therefore visually it looks like this:
but I need that it is of the following form his head:
can anyone help me on the following problem please.
I'd like to run a simple array via a loop within vue in laravel to give all the array values out in a table. This is my code I adjusted from a tutorial I found in the internet: enter code here
<template>
<div>
<h1>Coffeetypes</h1>
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr v-for="cctyp in cctypes" v-bind:key="cctyp.id">
<td>{{ cctyp.id }}</td>
<td>{{ cctyp.name }}</td>
<td>{{ cctyp.description }}</td>
<td><button class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
cctypes: [],
cctyp: {
id: '',
name: '',
description: '',
created_by: '',
updated_by: ''
},
id: '',
pagination: {},
edit: false
};
},
created() {
this.fetchCCTypes();
},
methods: {
fetchCCTypes(){
fetch('api/CCTypes')
.then(res => res.json())
.then(res => {
this.cctypes = res.data;
});
}
}
};
</script>
The problem is, that there is no filling in the table.
maybe it's the double .then()... in your fectch method ... you should console.log your data first ...
Tablesorter version: 2.22.3
I used the AJAX Get data from Server side,but finally the table row always 10.
P.S. tablesorterPager size property already set 9999
The table row will display all the data.
HTML and JS is
$(function () {
var gv_table;
gv_table= $("#Info").tablesorter({
theme: 'blue',
sortList: [[0, 0]],
widthFixed: true,
widgets: ['zebra', 'columnSelector', 'stickyHeaders'],
widgetOptions: {
columnSelector_container: '#ColumnSel',
columnSelector_columns: {
},
}
})
.tablesorterPager({
// target the pager markup - see the HTML block below
container: $("#infopager"),
size: 9999,
output: 'Showing: {startRow} to {endRow} (Total:{totalRows})'
});
});
$('#btnQuery').click(function () {
$.ajax({
url: "../Handler/DataSrcHandler.ashx?TableName=UserInfo",
type: 'POST',
data: {
DataSrc: $("#SelEnviro").val(),
Datakey: $("#txtUserKey").val()
},
success: function (response) {
$('#info tbody').empty().append(response);
$('#info').trigger('update');
}
});
};
<div id="infopager" class="pager" style="width:180px">
<span style="width:180px;color:blue" class="pagedisplay"></span>
</div>
<div style="overflow:auto;width: 500px;height:150px" >
<table id="Info" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Sex</th>
<th>Address</th>
<th>Class</th>
<th>EngName</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
ashx return message is like
<tr>
<td align='center' valign='top' nowrap>Peter</td>
<td align='center' valign='top' nowrap>0123456789</td>
<td align='center' valign='top' nowrap>Boy</td>
<td align='center' valign='top' nowrap>NA</td>
<td align='center' valign='top' nowrap>A</td>
<td align='center' valign='top' nowrap>Peter</td>
</tr>
When I'm using other "groupable" row template doesn't work in the kendo grid
But before there was no problem and now how to use the grouping together of row template
I put the code I wrote in a review do
jsfiddle :
Click here to check with jsfiddle
<script>
$(document).ready(function () {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: '/api/clientssnapshot',
dataType: 'json',
type: 'get'
}
}
});
$('.table').kendoGrid({
dataSource: ds,
sortable: true,
groupable: true,
selectable: true,
navigatable: true,
height: 500,
scrollable: true,
rowTemplate: kendo.template($("#client-row-template").html().replace('class="k-alt"', '')),
altRowTemplate: kendo.template($("#client-row-template").html()),//#class="k-alt"#
dataBound: function () {
$('.spark').sparkline([1, 2, 3, 4, 5, 6, 85, 2, 1]);
//$('.spark').each(function (i, e) {
// var $this = $(this);
// //console.info($this.attr('data-inrate'));
// var arr = eval('[' + $this.attr('data-inrate') + ']');
// console.log(this);
// $this.sparkline(arr);
//});
}
});
});
</script>
<body class="menu_hover">
<script id="client-row-template" type="text/x-kendo-template">
<tr role="row" class="k-alt">
<td role="gridcell" >#= Mac #</td>
<td role="gridcell" >#= RadioName #</td>
<td role="gridcell" > #=ApName# </td>
<td role="gridcell" > #=RemoteIp# </td>
<td role="gridcell" > <a href=#"#= AccountingId #" target="_blank" > #= AccountingName # </a> </td>
<td role="gridcell" >#= TX #</td>
<td role="gridcell" >#= RX #</td>
<td role="gridcell" >#= Signal #</td>
<td role="gridcell" >#= Uptime #</td>
<td role="gridcell">
<span class="spark" data-inrate="#= InRateHistory #" > </span>
</td>
</tr>
</script>
<div class="span6 box gradient main_stting">
<div class="dataTables_filter" id="txtSearch">
<label>
Search:
<input type="text" aria-controls="DataTables_Table_0"></label>
</div>
<div class="title">
<h3></h3>
</div>
<div class="content">
<table class="table">
<colgroup>
<!-- Mac -->
<col style="width: 170px">
<col style="width: 150px">
<col style="width: 80px">
<col style="width: 160px">
<col style="width: 130px">
<col style="width: 44px">
<col style="width: 50px">
<col style="width: 50px">
<col style="width: 78px">
<!-- Usage -->
<!-- <col style="width: 100px" />-->
</colgroup>
<thead>
<tr>
<th>Mac</th>
<th>Radio</th>
<th>AP</th>
<th>Remote IP</th>
<th>Name</th>
<th>TX</th>
<th>RX</th>
<th>Signal</th>
<th>Uptime</th>
<th>Usage</th>
</tr>
</thead>
</table>
</div>
</div>
</body></html>
You can do it in your own template with a trick that was posted in this thread: http://www.telerik.com/forums/grid-grouping-problem-when-using-row-template-bug
Which contains this JSFiddle: http://jsfiddle.net/THRQV/
Here's the code from that fiddle.
Markup
<table id="grid" style="width: 100%;">
</table>
<script id="rowTemplate" type="text">
<tr>
#= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #
<td>${Id}</td>
<td>${StatusText}</td>
<td>${CommissionTypeText}</td>
</tr>
</script>
Javascript
var localData = [
{Id: 1, StatusText: "Status 1", CommissionTypeText: "Commission 1"},
{Id: 2, StatusText: "Status 2", CommissionTypeText: "Commission 2"},
{Id: 3, StatusText: "Status 3", CommissionTypeText: "Commission 3"}
];
var dataSource = new kendo.data.DataSource( {
data: localData,
schema: {
model: {
fields: {
Id: { type: "number" },
StatusText: { type: "string" },
CommissionTypeText: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 500,
sortable: true,
filterable: true,
groupable: true,
pageable: true,
columns: [
{
field: "Id",
title: "Id",
filterable: false
},
{
field: "StatusText",
title: "StatusText"
},
{
field: "CommissionTypeText",
title: "CommissionTypeText"
}
]
});
Basically you are passing in the datasource, calling group() on it, and injecting the group cell when applicable.
When you group cells, KendoUI inserts a new cell in front of the existing but this is only done for the standard template, not for your templates.
My recommendation is switching to a template for each cell. Basically your column definition would become:
columns : [
{ field: "Mac", title: "Mac", width: 170 },
{ field: "RadioName", title: "Radio", width: 150 },
{ field: "ApName", title: "Ap", width: 80, template: '#=ApName#' },
{ field: "RemoteIp", title: "Remote IP", width: 160, template: '#=RemoteIp#' },
{ field: "AccountingName", title: "Name", width: 130, template: ' #= AccountingName # ' },
{ field: "TX", title: "TX", width: 44 },
{ field: "RX", title: "RX", width: 50 },
{ field: "Signal", title: "Signal", width: 50 },
{ field: "Uptime", title: "Uptime", width: 78},
{ field: "Usage", title: "Usage", template: '<span class="spark" data-inrate="#= InRateHistory #"> </span>' },
{ command: [ "edit" ], title: " " }
],
In addition, you simply define the grid HTML placeholder as:
<div class="table"></div>
Your JSFiddle modified here: http://jsfiddle.net/OnaBai/Dyb9Y/10/