<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);
}
}
} );
});
Related
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 have application authorizing users based on role claims they owned.
I have following set up
I. Server Side
I have registered policy for startup class
services.AddAuthorization(options =>
{
options.AddPolicy(Permissions.Products.Create, policy => policy.RequireClaim("Permissions", Permissions.Products.Create));
options.AddPolicy(Permissions.Products.Edit, policy => policy.RequireClaim("Permissions", Permissions.Products.Edit));
options.AddPolicy(Permissions.Products.View, policy => policy.RequireClaim("Permissions", Permissions.Products.View));
options.AddPolicy(Permissions.Products.Delete, policy => policy.RequireClaim("Permissions", Permissions.Products.Delete));
});
This is the api controller method.
// GET: api/Products
[HttpGet]
[Authorize (Policy = Permissions.Products.View)]
public async Task<ActionResult<List<Product>>> GetProducts()
{
return await _context.Products.ToListAsync();
}
This is my blazor component
#page "/product-list"
#inject HttpClient client
#inject IJSRuntime js
<h3>Products</h3>
<small>Add as many products as you wish.</small>
<div class="form-group">
<a class="btn btn-success" href="product/create"><i class="oi oi-plus"></i> Create New</a>
</div>
<br>
#if (products == null)
{
<text>Loading...</text>
}
else if (products.Length == 0)
{
<text>No Records Found.</text>
}
else
{
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Type</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (Product product in products)
{
<tr>
<td>#product.Id</td>
<td>#product.Name</td>
<td>#product.Type</td>
<td>
<a class="btn btn-success" href="product/edit/#product.Id">Edit</a>
<button class="btn btn-danger" #onclick="#(() => Delete(product.Id))">Delete</button>
</td>
</tr>
}
</tbody>
</table>
}
#code {
Product[] products { get; set; }
protected override async Task OnInitializedAsync()
{
products = await client.GetFromJsonAsync<Product[]>("api/products");
}
async Task Delete(int productId)
{
var product = products.First(x => x.Id == productId);
if (await js.InvokeAsync<bool>("confirm", $"Do you want to delete {product.Name}'s ({product.Id}) Record?"))
{
await client.DeleteAsync($"api/products/{productId}");
await OnInitializedAsync();
}
}
}
Then, I tested by login into superuser which grants all permissions (claims).
I get the user cookies attached to postman.
When I send the request to that controller. it resulted as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>PermissionBlazorApp</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="PermissionBlazorApp.Client.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
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 have used the datatables in my html page.
I have inserted a pdf button which will save the document/table in pdf format.This is a default feature in datatables.
However, the button is not working though it is displayed in the html page.
Below is my code :
datatable.html
<html>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.7/media/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/extensions/TableTools/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.7/extensions/TableTools/css/dataTables.tableTools.css">
<!--<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>-->
<body>
<table id="example" class="display">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
<script>
$(document).ready( function () {
var data = [
[
"Tiger Nixon",
"System Architect"
],
[
"Garrett Winters",
"Accountant"
]
];
$('#example').dataTable({
"aaData": data,
"dom" : 'T<"clear">lfrtip',
"tableTools" : {
"sSwfPath": "DataTables-1.10.7/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
}
});
} );
</script>
</body>
</html>
What to do ?
Try this :
add following js and css in following sequence :
https://www.datatables.net/release-datatables/media/js/jquery.js
https://www.datatables.net/release-datatables/media/js/jquery.dataTables.js
https://www.datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js
https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css
<table id="example" class="display">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
$(function () {
var data = [
[
"Tiger Nixon",
"System Architect"],
[
"Garrett Winters",
"Accountant"]
];
$('#example').dataTable( {
"aaData": data,
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf"
}
} );
});
I have a simple example of my problem. I am using Datatables 1.9. The column headers don't move when scrolling horizontally when the datatable is inside another html table. It works fine when it is not in the html table. My example was actually taken from their example on horizontal scrolling but I added the outer table. Any help would be appreciated. I have looked everywhere for the answer. Here is the code. Thanks
<head>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.dataTables.min.js"></script>
</head>
<form>
<table>
<tr>
<td>
<div id="demo">
<table id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<tr>
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td>-</td>
<td>U</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</form>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%"
} );
} );
</SCRIPT>
i had the same problem. I used this config
"scrollY": "650px",
"sScrollX": "100%",
"scrollCollapse": true,
use scrollCollapse to make sure if you have less data, the bottom or footer does not stay at specified height.
Try this http://jsfiddle.net/CHPqb/23/
I added a css code and instead of sScrollXInner I change it to scrollX : true
th, td {
white-space: nowrap;
}
div.dataTables_wrapper {
width: 80%;
margin: 0 auto;
}
$('#example').dataTable( {
"sScrollX": "100%",
"scrollX": true
} );
What worked for me was
"sScrollX": "100%",
"sScrollXInner": "110%",
in the Jquery where I created the table.
Instead if using "scrollX": true move datatable inside a div:
<div class='scroll'></div>
And add CSS:
div.scroll {
overflow:auto;
}
Move it into a div tag, and add position:relative ;overflow:auto; height:500px; to style.