As you can see from the screenshot below, I have a datatables displaying two related but disparate bits of data, Avg Score and # of Ratings:
When ordering by this column, it would be preferred if I could order by Avg Score first (numeric) and then # of Ratings second (numeric) but also keep them displayed in a single column.
I was thinking about how to modify the value of the data-order attribute to do manipulate a thing but I couldn't think of any solutions.
Anyone else solved this issue.
The data cell looks like this:
<td class="text-center sorting_1" data-search="-1" data-order="5.00">
<div class="mb-2">
<span class="badge badge-success">
5.00
</span>
</div>
<small class="text-muted">
10 ratings
</small>
</td>
You can define a custom sorting function for the column of your interest.
The snippet:
$('#example').DataTable({
"aoColumns": [{
"bSortable": true}, {"bSortable": true}, {"sType": "customAvgScoreSort", "bSortable": true}]
});
// custom sorting.......
jQuery.fn.dataTableExt.oSort["customAvgScoreSort-desc"] = function (x, y) {
return parseFloat($(y).find('span').text()) - parseFloat($(x).find('span').text()) || parseInt($(y).siblings('small').text()) - parseInt($(x).siblings('small').text());
};
jQuery.fn.dataTableExt.oSort["customAvgScoreSort-asc"] = function (x, y) {
return parseFloat($(x).find('span').text()) - parseFloat($(y).find('span').text()) || parseInt($(x).siblings('small').text()) - parseInt($(y).siblings('small').text());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Type</th>
<th>Unique deals</th>
<th>AVG score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sales development</td>
<td>0</td>
<td>
<div class="mb-2">
<span class="badge badge-success">
5.0
</span>
</div>
<small class="text-muted">
2 ratings
</small>
</td>
</tr>
<tr>
<td>Sales development</td>
<td>0</td>
<td>
<div class="mb-2">
<span class="badge badge-success">
5.0
</span>
</div>
<small class="text-muted">
1 ratings
</small>
</td>
</tr>
<tr>
<td>Sales development</td>
<td>0</td>
<td>
<div class="mb-2">
<span class="badge badge-success">
5.0
</span>
</div>
<small class="text-muted">
10 ratings
</small>
</td>
</tr>
<tr>
<td>Sales development</td>
<td>0</td>
<td>
<div class="mb-2">
<span class="badge badge-success">
5.0
</span>
</div>
<small class="text-muted">
3 ratings
</small>
</td>
</tr>
</tbody>
</table>
Related
am trying to retrieve data from the controller and send it through and email to student but it not working .i have tried it but it not going
public function test(){
$welcome = DB::table('results')
->select('studentinfos_id','marks','subject_code','name','email','rollid','classname','classnumber','image_path')
->join('studentinfos','studentinfos.id','=','results.studentinfos_id')
->join('subjects','subjects.id','=','results.subjects_id')
->join('addclasses','addclasses.id','=','results.addclasses_id')
->where('studentinfos.id',1)
->orderBy('subject_code','ASC')
->get();
Mail::to('serge#gmaile','divine')->cc('leade#gmail')->send(new mytestmail($welcome));
echo 'check ur inbox';
}
how do i get all the result from the $welcome in my view.blade.php
i was hopping that i will send and email that contains student info and result of there marks and subject through email
<div class="container">
<div class="text-center">
<h1> Result for {{ $classname }} student </h1>
</div>
<div class="border bg-white seespace p-3">
<div class="row">
<div class="col-md-8">
<table class="table table-borderless">
<tr>
<th>CLASS</th>
<td>{{ $welcome->classname }} {{ $welcome->classnumber }}</td>
</tr>
<tr>
<th>FULL NAME</th>
<td>: {{ $welcome->name }}</td>
</tr>
<tr>
<th>EMAIL</th>
<td>: {{ $welcome->email }}</td>
</tr>
<tr>
<th>ENROLLMENT</th>
<td>: {{ $welcome->enrollment }}</td>
</tr>
</table>
</div>
<div class="col-md-4">
<img class=" imgreport center" src="{{ asset('images/' . $welcome->image) }}"
alt="Card image cap">
</div>
</div>
<nav class="bg-dark text-white-50 mb-5">
<div class="container">
<div class="row p-3">
</div>
</div>
</nav>
<table class="table text-center table-bordered table-responsive py-3">
<thead class="thead-info text-center">
<tr>
<th>no</th>
<th>subject</th>
<th>marks</th>
</tr>
</thead>
<tbody>
<?php $num=1;
$total = 0;
$name;
?>
#foreach($welcome as $see)
<tr>
<td>{{ $num++ }}</td>
<td>{{ $see->subject_code }}</td>
<td>{{ $see->marks }}</td>
</tr>
<?php
$total += $see->marks ?>
#endforeach
<tr>
<td></td>
<td >total marks</td>
<td>{{ $total }}</td>
</tr>
<tr>
<td></td>
<td>Download</td>
<td>
<form action="/print" method="get">
<input type="hidden" value="{{$studnet}}" name='id' >
<button class="btn btn-info">Download</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
#stop
you have to pass the welcome variable to your view.
In the controller method add the data when displaying your view:
return view('view', ['welcome' => $welcome]);
https://laravel.com/docs/8.x/views#passing-data-to-views
I have a search built in VueJS and the results of the search are displayed in a separate component. I want to display the data in a table with the table headings. The issue I'm having is that the table heading appears before each row. How do I get it to appear once? Im sure this is easy but I cant think how to do this. Im fairly new to Vue, so any help appreciated.
<table class="table table-hover" id="simpleTable">
<thead>
<tr>
<th
v-on:click="sortTable(title)"
:key="title"
scope="col"
class="col-md-3"
>
Course
</th>
<div
class="arcoursedata"
v-if="title == sorttitle"
v-bind:class="ascending ? 'arcoursedata_up' : 'arcoursedata_down'"
></div>
<th scope="col">Award</th>
<th scope="col">Level</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-3">
{{ title }}
</td>
<td>
{{ award }}
</td>
<td class="col-md-3">
{{ level }}
</td>
<td class="col-md-3">
<a
:href="result.displayUrl"
class="btn-sm btn-primary"
role="button"
>
<span class="sr-only">Read more about {{ title }}</span> Read
more</a
>
</td>
</tr>
</tbody>
</table>
You need to separate row from tbody to component. And do v-for only on this component and not on the entire table.
It will be look like:
<table class="table table-hover" id="simpleTable">
<thead>
<tr>
<th
v-on:click="sortTable(title)"
:key="title"
scope="col"
class="col-md-3"
>
Course
</th>
<div
class="arcoursedata"
v-if="title == sorttitle"
v-bind:class="ascending ? 'arcoursedata_up' : 'arcoursedata_down'"
></div>
<th scope="col">Award</th>
<th scope="col">Level</th>
</tr>
</thead>
<tbody>
<rowComponent v-for="rowData in tableData" :row="rowData"></rowComponent>
</tbody>
</table>
And RowComponent will look like:
<td class="col-md-3">
{{ row.title }}
</td>
<td>
{{ row.award }}
</td>
<td class="col-md-3">
{{ row.level }}
</td>
<td class="col-md-3">
<a :href="row.displayUrl"
class="btn-sm btn-primary"
role="button">
<span class="sr-only">Read more about {{ row.title }}</span> Read
more</a>
</td>
<script>
export default {
name: "rowComponent",
props: ['row']
}
</script>
In different posts around the internet (for example this one) I found that Vue 2 code should work with Vue 3 but for me it does not. For example I have simple component
<template>
<div class="overflow-x-auto bg-white rounded-lg shadow overflow-y-auto relative">
<table class="table">
<thead>
<tr class="text-left">
<th>
<label>
<input type="checkbox">
</label>
</th>
<th>User ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Gender</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>
<input type="checkbox" name="1">
</label>
</td>
<td> <span>{{ id }}</span> </td>
<td> <span>Cort</span> </td>
<td> <span>Tosh</span> </td>
<td> <span>{{ email }}</span> </td>
<td> <span>Male</span> </td>
<td> <span>327-626-5542</span> </td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
id: 1,
email: 'test#mail.com'
}
},
mounted() {
alert('mounted');
},
created() {
alert('created');
}
};
</script>
The table is generated just fine, but both mounted and created not fired when component made. Also the email and id not shown. Only the table is shown.
Your code works:
Vue.createApp({
data() {
return {
id: 1,
email: 'test#mail.com'
}
},
created() {
alert('created')
},
mounted() {
alert('mounted')
}
}).mount('#app')
<script src="https://unpkg.com/vue#next"></script>
<div id="app" class="overflow-x-auto bg-white rounded-lg shadow overflow-y-auto relative">
<table class="table">
<thead>
<tr class="text-left">
<th>
<label>
<input type="checkbox">
</label>
</th>
<th>User ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Gender</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>
<input type="checkbox" name="1">
</label>
</td>
<td> <span>{{ id }}</span> </td>
<td> <span>Cort</span> </td>
<td> <span>Tosh</span> </td>
<td> <span>{{ email }}</span> </td>
<td> <span>Male</span> </td>
<td> <span>327-626-5542</span> </td>
</tr>
</tbody>
</table>
</div>
I am using Struts 1.x in my application. Recently i used Vue js.So, I use the same jsp page for Adding and updating (in this case company). So When i click edit, the details are fetched the page is redirected to that page and form values are set from the action class.
Here is the html portion
<form action="company.do" method="post" name="companyForm">
<html:hidden property="method" value="doAddUpdateCompany" />
<html:hidden property="companyId" value="${companyForm.companyId}" />
<div class="row" >
<div class="col-md-9">
<div class="grid simple">
<div class="grid-title ">
<h4>
<logic:equal value="addCompany" property="method" name="companyForm">
New <span class="semi-bold">Company</span>
</logic:equal>
<logic:equal value="updateCompany" property="method" name="companyForm">
Edit <span class="semi-bold">Company</span>
</logic:equal>
</h4>
<div class="tools"> </div>
</div>
<div class="grid-body">
<table class="tbl_wall" style="width: 100%" >
<tr >
<td class="fi_wall" >Company Name<span class="notify style16"> *</span></td>
<td class="fi_wall" ><html:text property="companyName" name="companyForm" styleClass="med_txt" /></td>
<td> </td>
</tr>
<tr>
<td class="fi_wall" valign="top" >Company Code<span class="notify style16"> *</span> (3 Letter)</td>
<td class="fi_wall" valign="middle" ><html:text property="companyCode" maxlength="3" styleClass="med_txt" name="companyForm" /></td>
<td> </td>
</tr>
<tr id="cmp">
<td class="fi_wall">Company Type </td>
<td class="fi_wall"><select name="companyType" v-model="companyType">
<option value="-1">select</option>
<option v-for=" result in results " v-bind:value="result.commonId">
{{ result.name}}</option>
</select></td>
</tr>
<tr>
<td colspan="3" align="center">
<button type="button" class="btn btn-success" onclick="doSave()" ><i class="fa fa-save"></i> Save</button>
</td>
</tr>
</table> </form>
and the vue Portion
<script type="text/javascript">
new Vue({
el: '#cmp',
data: {
results: [],
companyType : '-1'
},
mounted() {
axios.get('/easyoffice/companyType.do?method=getCompanyTypeAjax').then(response => {
this.results = response.data,
this.companyType = document.forms['companyForm'].companyType.value
})
.catch(e => {
this.errors.push(e)
})
}
});</script>
i used this.companyType = document.forms['companyForm'].companyType.value to set form value but it is not working. Any Thoughts?
I making a simple demo where i have few employees information. I am using materialize css table. But i am getting extra space between sr.no and other column names.
here is my code :
<br/>
<div class="row">
<div class="col l8">
<div class="card darken-2">
<div class="card-content">
<span class="card-title">{{tableTitle}}</span>
<br/>
<div class="row">
<div class="input-field col s4">
<input id="empSearch" type="text" placeholder="Search">
</div>
</div>
<br/>
<div class="row">
<div class="col lg7">
<table class="bordered highlight responsive-table">
<thead>
<tr>
<th>Sr.no</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
<th>Designation</th>
<th>Department</th>
<th>Salary</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of EmployeeData;let i= index">
<td>{{i+1}}</td>
<td>{{item.Name}}</td>
<td>{{item.Age}}</td>
<td>{{item.Gender}}</td>
<td>{{item.Address}}</td>
<td>{{item.Designation}}</td>
<td>{{item.Department}}</td>
<td>{{item.Salary}}</td>
<td>
<i class="material-icons">delete</i>
</td>
<td>
<i class="material-icons">mode_edit</i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
in the <th> you could set width="30px" or whatever your're comfortable with.
The icons, I'd put in one cell, and use text-align: right
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
<thead>
<tr>
<th width="30px">Sr.no</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
<th>Designation</th>
<th>Department</th>
<th>Salary</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>{{i+1}}</td>
<td>{{item.Name}}</td>
<td>{{item.Age}}</td>
<td>{{item.Gender}}</td>
<td>{{item.Address}}</td>
<td>{{item.Designation}}</td>
<td>{{item.Department}}</td>
<td>{{item.Salary}}</td>
<td style="text-align: right">
<i class="material-icons">delete</i>
<i class="material-icons">mode_edit</i>
</td>
</tr>
</tbody>
</table>