I am trying to build an email inbox browser in vuejs over .NET MVC backend. I am primarily receiving html emails which I want to display in a scrollable table cell.
Here's a sample email body.
html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style><!-- /* Font Definitions */ #font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4;} #font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0cm; margin-bottom:.0001pt; font-size:11.0pt; font-family:"Calibri","sans-serif";} a:link, span.MsoHyperlink {mso-style-priority:99; color:blue; text-decoration:underline;} a:visited, span.MsoHyperlinkFollowed {mso-style-priority:99; color:purple; text-decoration:underline;} span.EmailStyle17 {mso-style-type:personal-compose; font-family:"Calibri","sans-serif"; color:windowtext;} .MsoChpDefault {mso-style-type:export-only;} #page WordSection1 {size:612.0pt 792.0pt; margin:72.0pt 72.0pt 72.0pt 72.0pt;} div.WordSection1 {page:WordSection1;} -->
</style>
<!--[if gte mso 9]><xml> <o:shapedefaults v:ext="edit" spidmax="1026" /> </xml><![endif]-->
<!--[if gte mso 9]><xml> <o:shapelayout v:ext="edit"> <o:idmap v:ext="edit" data="1" /> </o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=WordSection1>
<p class=MsoNormal>
<o:p>Test Email </o:p></p>
</div>
</body>
</html>
Here's my vuejs component
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
interface Email {
to: string;
from: string;
subject: string;
body: string;
}
#Component
export default class FetchDataComponent extends Vue {
inboxEmails: Email[] = [];
mounted() {
fetch('api/Email/InboxEmails')
.then(response => response.json() as Promise<Email[]>)
.then(data => {
this.inboxEmails = data;
});
}
}
And here's template.
<template>
<div>
<h1>Emails</h1>
<p>The following emails are in your inbox</p>
<table v-if="inboxEmails.length" class="table">
<thead>
<tr>
<th>To</th>
<th>From</th>
<th>Subject</th>
<th>Body</th>
</tr>
</thead>
<tbody>
<tr v-for="item in inboxEmails">
<td>{{ item.to }}</td>
<td>{{ item.from }}</td>
<td>{{ item.subject }}</td>
<td><div>{{ item.body }}</div></td>
</tr>
</tbody>
</table>
<p v-else><em>Loading...</em></p>
</div>
</template>
<script src="./emails.ts"></script>
I understand that this is not a scrollable table cell. But I want to solve the display issue first before I put it into a scrollable table cell.
It seems you'd to display the whole email message (<html>email body</html>), if so, uses <iframe :srcdoc="emailBody"> should be one solution.
Check MDN IFrame on the details of property=srcdoc, and the browser compatibility.
let testEmailBody = `<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style><!-- /* Font Definitions */ #font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4;} #font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0cm; margin-bottom:.0001pt; font-size:11.0pt; font-family:"Calibri","sans-serif";} a:link, span.MsoHyperlink {mso-style-priority:99; color:blue; text-decoration:underline;} a:visited, span.MsoHyperlinkFollowed {mso-style-priority:99; color:purple; text-decoration:underline;} span.EmailStyle17 {mso-style-type:personal-compose; font-family:"Calibri","sans-serif"; color:windowtext;} .MsoChpDefault {mso-style-type:export-only;} #page WordSection1 {size:612.0pt 792.0pt; margin:72.0pt 72.0pt 72.0pt 72.0pt;} div.WordSection1 {page:WordSection1;} -->
</style>
<!--[if gte mso 9]><xml> <o:shapedefaults v:ext="edit" spidmax="1026" /> </xml><![endif]-->
<!--[if gte mso 9]><xml> <o:shapelayout v:ext="edit"> <o:idmap v:ext="edit" data="1" /> </o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=WordSection1>
<p class=MsoNormal>
<o:p>Test Email </o:p></p>
<p style="background-color:green;color:white">I am a test!</p>
</div>
</body>
</html>`
Vue.config.productionTip = false
app = new Vue({
el: "#app",
data: {
emails: [
{'from':'stackoverflow', 'to': 'someone#test.com', 'body': testEmailBody},
{'from':'stackoverflow', 'to': 'someone#test.com', 'body': testEmailBody}
]
}
})
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<div>
<table>
<tr v-for="(email, index) in emails" :key="index">
<td>{{email.from}}</td>
<td>{{email.to}}</td>
<td><iframe :srcdoc="email.body"></iframe></td>
</tr>
</table>
</div>
</div>
Related
Hello when i get some data on my Vue app (from 2 forms, 1 select and 1 table), i want to click a button to send that data to the email put on the respective form. With my code, i am able to show the data i want to send, in a output i create on my app, as testing, however no mail is sent. My .env file is filled correctly and here are my other files
I created a mailable ComprasMail
<?php
namespace App\Mail;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;
class ComprasMail extends Mailable
{
use Queueable, SerializesModels;
public $data;
/**
* Create a new message instance.
*
* #return void
*/
public function __construct($data)
{
$this->data = $data;
}
/**
* Build the message.
*
* #return $this
*/
public function build()
{
$subject = 'Compra Efectuada com Sucesso';
return $this->view('Email.comprasMail')->subject($subject);
}
}
I created a blade file por my mail template
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Icons"rel="stylesheet">
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<!-- Site CSS -->
<link rel="stylesheet" href="/css/style.css">
<!-- ALL VERSION CSS -->
<link rel="stylesheet" href="/css/versions.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="/css/responsive.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="/css/custom.css">
<link rel=”stylesheet” href=”https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css”>
<!-- Modernizer for Portfolio -->
<script src="/js/modernizer.js"></script>
</head>
<body>
<tr>
<div id="hosting" class="section wb" style="background: rgb(248, 248, 248)">
<br>
<br>
<table cellpadding="0" height="100" width="100%">
<tr>
<td text-align="center" valign="top" class="email-container">
<div>
<td text-align='center' style='text-align:center'><a href="http://127.0.0.1:8000/home" target="_blank">
</div>
<br>
<div class="row dev-list ">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.3s">
<div class="wow fadeIn" text-align="center" style="background-color: rgba(0, 0, 0, 0.10); border-radius: 15px;" data-wow-duration="1s" data-wow-delay="0.3s">
<br>
<div class="message-box">
<div class="widget-title">
<h3 style="color: #E62B36; font-family: Eczar;"><strong>Bom dia caro {{$data['nome']}}</strong></h3>
<h4 text-align="center"> {{$data['transportadora']}} </h4>
</div>
<!-- end title -->
</div>
<hr>
<h6 text-align="center"> © {{ date('Y') }} Desafio Tecnico. Todos os Direitos Reservados</h6>
<br>
<br>
</div>
<!--widget -->
<br>
</div><!-- end col -->
</div><!-- end row -->
</tr>
</table>
</div><!-- end container -->
Here is my route
Route::post('/mail-send', [ProdutoController::class, 'mailSend']);
In my controller ( when i tried the return response that is commented, i simply have a 500 error)
public function mailSend(Request $request) {
return response()->json([$request->all()]);
$email = $request->email;
$data = [
'name' => $request->nome,
'transportadora' => $request->transportadora
];
Mail::to($email)->send(new ComprasMail($data));
/* return response()->json([
'message' => 'Mail has sent.'
], Response::HTTP_OK);*/
}
In my vue component, first the button
<button :disabled="isDisabled2" #click="sentMail"> Add </button>
my data()
data() {
return{
compras:[],
nome:"",
email:"",
transportadora:"",
output:"",
My sentMail function
sentMail(e) {
e.preventDefault();
var obj = this;
axios.post('/mail-send', {
nome: this.nome,
email: this.email,
transportadora: this.transportadora,
compras: this.compras
}).then(function (response) {
obj.output = response.data;
})
.catch(function (error) {
obj.output = error;
});
},
With this , as i said, all the data i want to collect is correctly saved, and appear how it is expected when i call the obj.output. However i am not able to send any email . First i am trying to send emails with only the name, to see if it works, then after that i will put more on the template.
Thank you in advance
Edit: Just did this tutorial as a way to test if i at least could send a simple email and it worked, so at least i know now my problem it is not with the config with Mailtrap and it is somewhere inside my code
https://www.youtube.com/watch?v=WU4_HzTa6PM
Edit 2: Made some changes on the code,but still won't work. After some testing i concluded that my Mailable, and config are correct, since with the small tutorial i used for testing, it worked, however i am not understanding why the mail i set up isn't being sent
I would appreciate any kind of help. Thank You
Just more update. The error that is giving me on the console is:
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
settle.js:19 Uncaught (in promise)
AxiosError
code
:
"ERR_BAD_RESPONSE"
config
:
{transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message
:
"Request failed with status code 500"
name
:
"AxiosError"
request
:
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response
:
{data: {…}, status: 500, statusText: 'Internal Server Error', headers: AxiosHeaders, config: {…}, …}
stack
:
"AxiosError: Request failed with status code 500\n at settle (http://[::1]:5173/node_modules/.vite/deps/axios.js?v=600aa94f:1116:12)\n at XMLHttpRequest.onloadend (http://[::1]:5173/node_modules/.vite/deps/axios.js?v=600aa94f:1327:7)"
[[Prototype]]
:
Error
After several time looking dor a solution to my problem, i finally was able to find one. In my Script i simply needed to change error to error.response.data For some reason, with only «error» it was always giving a 500 error
sentMail(e) {
e.preventDefault();
var obj = this;
axios.post('/mail-send', {
nome: this.nome,
mail: this.email,
transportadora: this.transportadora,
compras: this.compras
}).then(function (response) {
obj.output = response.data;
})
.catch(function (error) {
obj.output = error;
});
},
When exporting my dataTable to a PDF I'd like to add an extra blank column that doesn't exist on the dataTable itself. All it needs is the headline and a blank field for each row. Is that possible somehow?
I was able to add a custom column by adding the following to my exportOptions in my dataTabel config:
customizeData: function (data) {
data['header'].push('Custom Field');
$.each(data['body'], function(key, row) {
row.push('');
});
}
You can add an extra empty column to the PDF by manipulating the PDFMake document structure.
You can access this structure using the pdfHtml5.customize function.
A simple demo:
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [{
extend: 'pdf',
customize: function (pdf) {
addExtraColumn(pdf);
}
}
]
});
});
function addExtraColumn(pdf) {
pdf.content[1].table.body.forEach(function(row, idx) {
let newCell = structuredClone(row[0]);
newCell.text = idx === 0 ? "New Heading" : "";
row.push( newCell );
console.log( row );
})
};
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Export to PDF</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display nowrap dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adelaide Nixon</td>
<td>One</td>
</tr>
<tr>
<td>Bruna Nash</td>
<td>Two</td>
</tr>
</tbody>
</table>
</div>
</body>
So, if you start with a table which looks like this:
Then the PDF will look like this:
From there, you may want to further customize the PDF - for example, by drawing lines around every cell, and so on.
You can read the PDFMake documentation for tables, and see examples for more guidance.
I'm trying to sum a computed property (effectively sum a column in a table), but it returns 0 (Total Net - bottom of last column). See fiddle: https://jsfiddle.net/2djreyds/ I think it has to do with how I am referencing the computed property. Sure its something simple! Any ideas? or if there's a smarter way to do this let me know! :) Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Tutorial | More Computed Properties</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container">
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>Phase</th>
<th>Labour Budget</th>
<th>Labour Hours</th>
<th>Labour Cost Rate</th>
<th>Labour Cost</th>
<th>Overhead Cost</th>
<th>Net</th>
</tr>
</thead>
<tbody>
<tr is="data-row" v-for="record in records" :record="record"></tr>
<tr>
<td></td>
<td></td>
<td>Total Hours: {{totalHours}}</td>
<td></td>
<td></td>
<td></td>
<td class="alert alert-info">Total Net: {{totalNet}}</td>
<tr>
</tbody>
</table>
</div>
</div>
</body>
<script src="https://unpkg.com/vue#2.0.3/dist/vue.js"></script>
<script type="text/x-template" id ="data-row">
<tr>
<td>{{record.phase}}</td>
<td>{{record.labourBudget}}</td>
<td><input type="number" v-model="record.labourHours"></td>
<td><input type="number" v-model="record.labourCostRate"></td>
<td>{{labourCost}}</td>
<td>{{overheadCost}}</td>
<td>{{net}}</td>
<tr>
</script>
<script>
var app = new Vue({
el: '#app',
data: {
records: [
{phase:"Phase1", labourBudget: 100, labourHours: 4, labourCostRate: 45},
{phase:"Phase2", labourBudget: 100, labourHours: 2, labourCostRate: 42}
]
},
components:{
'data-row':{
template: "#data-row",
props: ["record"],
data:function(){
return this.record;
},
computed:{
labourCost: function(){
return this.record.labourHours * this.record.labourCostRate;
},
overheadCost: function(){
return this.labourCost * 1.36;
},
net: function(){
return this.record.labourBudget-this.labourCost-this.overheadCost;
}
}
}
},
computed:{
totalHours: function(){
var sum = 0;
var items = this.records;
for (var i in items){
sum += items[i].labourHours;
}
return sum;
},
totalNet: function(){
var sum = 0;
var items = this.$children;
for (var i in items){
sum += items[i].overheadCost;
}
return sum;
}
}
})
</script>
</html>
I am learning knockout and trying out a small example below are the the three files that I have:
index
introduction
introduction
I am using netbeans IDE for the development .
index.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script data-main="js/main" src="js/libs/require/require.js" type="text/javascript"></script>
<link href="css/libs/oj/v2.1.0/alta/oj-alta-min.css" rel="stylesheet" type="text/css"/>
<style>
table, th, td {
border: 1px solid black;
padding: 15px;
}
th {
text-align: left;
}
thead{
border-style: double;
font-weight: bold ;
}
tr {
text-align: left;
}
{background-color: #f5f5f5}
</style>
</head>
<body>
<div data-bind="ojModule: {name: 'introduction'}"></div>
</body>
</html>
viewModels - introduction.js
/**
* introduction module
*/
define(['ojs/ojcore', 'knockout',oj,jquery,require
], function (oj, ko) {
/**
* The view model for the main content view template
*/
function introductionContentViewModel() {
var self = this;
self.firstName = ko.observable("Planet");
self.lastName = ko.observable("Earth");
self.fullName = ko.pureComputed(function () {
return this.firstName() + " " + this.lastName();
}, this);
this.fullName= this.firstName() +" " +this.lastName();
this.resetName=function(){
alert("Reset Name!");
this.firstName("James");
this.lastName("Potter");
};
this.capitalizeName=function(){
var curValue=this.lastName();
this.lastName(curValue.toUpperCase());
};
function seatReservation(fname,lname, reservMeals){
this.firstName=fname;
this.lastName=lname;
this.meals = ko.observable(reservMeals);
/* this.formattedPrice=ko.computed(function(){
var price = this.meals.price;
return price ? "$" + price.toFixed(2):"none";
});*/
};
this.mealsAvailable=[{mealName:"SandWich",price:25},
{mealName:"Roti",price:23},
{mealName:"Dal",price:22}];
self.seats = ko.observableArray([
new seatReservation("Steve","Hawkins", this.mealsAvailable[0]),
new seatReservation("Bert","Baltymoore", this.mealsAvailable[1])
]);
//function to add new reservation into the table
this.newReservationRow=function(){
this.seats.push(new seatReservation("","",this.mealsAvailable[0]));
};
}
return introductionContentViewModel;
});
views -introduction.html
<body>
<form>
<div class='liveExample'>
<p> First Name: <span data-bind='text: firstName'/> </p>
<p> Last Name: <span data-bind='text: lastName'/> </p>
<p>First name: <input data-bind='value: firstName' /></p>
<p>Last name: <input data-bind='value: lastName' /></p>
<h2>Hello, <span data-bind='text: fullName'> </span>!</h2>
<button data-bind='click: resetName' >Reset Name </button>
<button data-bind='click: capitalizeName'>Capitalize </button>
<input type='submit' data-bind='click: resetName' value='Reset'/>
</div>
<div class="Reservations">
<h2>Reservations </h2>
<table>
<thead> <tr><td> FirstName </td><td> LastName</td> <td> Meals</td><td> Price</td></tr></thead>
<tbody data-bind="foreach: seats">
<tr>
<td><input data-bind="value: firstName"/> </td>
<td><input data-bind="value: lastName"/> </td>
<td><select data-bind="options: meals,optionsText:'mealName'"></select> </td>
<td data-bind="text: meals().price"> </td>
</tr>
</tbody>
</table><br>
<input type="submit" value="New Reservation" label="New Reservation" title="Click to Make a New Reservation" data-bind="click: newReservationRow"/>
</div>
</form>
</body>
I am not getting the desired out put. The desired output is something like this in the below link
http://learn.knockoutjs.com/#/?tutorial=collections
You are mixing self and this a lot in your code. I recommend cleaning that up first and see if things start working for you. Personally, I like to stay with self.xxxx format.
Also, remove the reference to "require" inside of your define block in the introduction.js file. That may be causing some issues. Either way, it's not needed.
Finally, it appears you are doing all of this using Oracle JET. Since the introduction.html is a view that will be used inside of ojModule, you do not need to have the < body> element defined a second time. The introduction.html is going to be a fragment that will take the place of the < div> that you have bound to ojModule.
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
</script>
<script>
$(document).ready(function () {
$('#dataTables-example').dataTable( {
"fnDrawCallback": function( oSettings ) {
if ($(".dataTables_empty")[0]) {
$('#newclient').prop("disabled", false);
} else {
$('#newclient').prop("disabled", true);
}
}
} );
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link href="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<link href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="add-client"><button type="button" class="btn btn-primary btn-sm" id="newclient" disabled="true">Add Client</button></div>
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Name</th>
<th>File Number</th>
<th>Department</th>
<th>Date</th>
<th>User Name</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Mbello Elizabeth</td>
<td>954687</td>
<td>w547</td>
<td>October 15 2013</td>
<td>Mbello</td>
<td>cfhqsuvx</td>
</tr>
</tbody>
</table>
I'm using DataTables and I need to enable a button when no results found after searching, Any one can help me please.
Thanks
it works here but it dosen't work in my page, I don't know what is the problem
You could use the DataTables draw callback to find out if there are no results in the current table. fnDrawCallback
This is a simple fiddle to check how to enable a button after searching with no results.
Javascript:
$(document).ready(function () {
$('#example').dataTable( {
"fnDrawCallback": function( oSettings ) {
if ($(".dataTables_empty")[0]) {
$('#test').prop("disabled", false);
} else {
$('#test').prop("disabled", true);
}
}
} );
});