We are using DataTables.Net within a Bootstrap Card. The card is initially collapsed. The grid is as small as possible. We can fix by choosing the page size and it will expand. If the Card is not collapsed it loads just fine. How can I add code to automatically reload on the click of the card or even better just get it to load the full size when the card is collapsed?
<!-- Begin: LogFile -->
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-animation-speed="500"><i class="fal fa-plus"></i></button>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-12">
<table id="dataTableLogFile" class="table table-hover table-striped text-responsive nowrap" style="width: 100%;">
<thead>
<tr>
<th>View</th>
<th>Category</th>
<th>Payload</th>
<th>Country</th>
<th>State</th>
<th>Postal Code</th>
<th>Lat/Long</th>
<th>Created</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
After a lot of trial and error the below is working perfectly in every web browser (Chrome, Edge, Firefox, Safari, etc). This appears to be the fix that everyone would need. The key is the hide.bs.collapse which runs AFTER the card is fully extended.
<script>
$(document).ready(function () {
$('button').on('click', (event) => {
$('hide.bs.collapse', (event) => {
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust()
.responsive.recalc()
.scroller.measure()
.fixedColumns().relayout();
});
});
});
</script>
Related
I'm working on asp .net core application. I need to load a modal dialog box when the page loads based on data and fetch some input from users. I'm able to load the popup using the following jquery code
$('#activePolicyChooserDialog').modal({ backdrop: "static ", keyboard: false }, 'show');
when I click an element(radio button) inside the popup it keeps closing how can I prevent the popup from closing when I click the radio button inside the popup
<div class="modal container w-100" id="id">
<div class="modal-dialog modal-lg bg-white">
<div class="modal-body modal-xl">
#foreach (var x in Ids)
{
<div class="row">
<input class="col-1 mt-3" style="height: 20px; width: 20px; vertical-align: top;" type="radio" name="option`your text`" value="#x.id" />
<table class="table table-sm table-striped col-10 rounded">
<thead class="card-header section-header">
<tr style="font-family: Oxygen-Bold, 'Oxygen Bold', Oxygen, sans-serif; font-weight: 700;">
<th colspan="4">Package#: #x.SubmissionIdNo</th>
</tr>
</thead>
<tbody>
<tr style=" font-family: 'Lato Bold', Lato, sans-serif;font-weight: 700;">
<td>Product</td>
<td>Policy#</td>
<td>Effective Date</td>
<td></td>
</tr>
#foreach (var item in Model.Where(_ => _.id == x.id))
{
<tr style="font-family: Lato, sans-serif; font-weight: 400;">
<td>#item.Name</td>
<td> #item.Number </td>
<td>#item.Date.ToShortDateString()</td>
<td></td>
</tr>
}
</tbody>
</table>
</div>
}
<button type="button" class="btn btn-primary m-3" id="selectPackageBtn">Select</button>
</div>
</div>
</div>
I don't want the pop up to close when I click on the radio button and be able to call the respective jquery event handlers
I am using a modal screen to show a datatable that summarizes a client's restaurant order. It contains a couple of div's to provide info and the mentioned table with the order (ammount, description, value).
Then, that order will be printed in a 48mm width paper special printer (POS58 Printer)
I'am struggling on how to print this information. Modal is overflowing once I try to print the modal.
I have tried so far: -Using word-break, different font-sizes but I think I am missing something.
Printing in PDF or a normal printer works perfectly fine.
Any suggestions?
<div class="modal fade" id="print_comanda" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content border-0">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">XX Restaurant</h5>
</div>
<div class="modal-body">
<p class="font-weight-bold" style="text-align:center">Internal Ticket</p>
<div class="text mb-3">
<div id="table_nr" style="text-align:center; font-size: 2rem;"></div>
<div id="table_hs"></div>
<div id="table_dt"></div>
<div id="table_client"></div>
<div id="table_waiter"></div>
</div>
<table width="100%" id="table_final" class="table">
<thead>
<tr>
<th scope="col" class="text-center">Ammt.</th>
<th scope="col" class="text-center">Desc.</th>
<th scope="col" class="text-center">Subtot.</th>
<th scope="col" class="text-center">Total</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="nonPrintable2">
<div class="modal-footer">
<button type="button" id="cancel_a" class="btn btn-light" data-dismiss="modal">Cancel</button>
<button type="submit" id="btn_print" class="btn btn-dark">Print</button>
</div>
</div>
</div>
</div>
</div>
I am trying to incorporate dataTables to my posts index. i get the table to appear but there are no information shown in the table columns
I tried implementing the DataTables as their side says and i kept the normal way of displaying data just to be sure i get results
I use
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
For the creation of my table i use:
<table class="display" id="postsTable">
<thead>
<tr>
<td>ID</td>
<th>Title</th>
<th>Slug</th>
<th>Subtitle</th>
<th>Content</th>
</tr>
</thead>
<tbody>
#foreach($posts as $post)
<tr>
<td>{{$post->id}}</td>
<td>{{$post->Title}}</td>
<td>{{$post->Slug}}</td>
<td>{{$post->Subtitle}}</td>
<td>{{$post->Content}}</td>
</tr>
#endforeach
</tbody>
</table>
</body>
<script>
$(document).ready( function () {
$('#postsTable').DataTable();
} );
</script>
And i am sure i can get the results of my posts table since when i use:
<h1 class="title">Posts Table</h1>
<form action="/posts/create" id="myTable">
<div class="field">
<div class="control">
<button type="submit" class="button is-link">Create New Post</button>
</div>
</div>
</form>
#foreach ($posts as $post)
<li>
<a href="/posts/{{ $post->id }}">
{{$post->title}}
</a>
</li>
#endforeach
I get results.
Any help is appreciated as i couldn't find a working solution anywhere.
After reviewing my code i realized that i had a typo on the names of the attributes i was trying to get. Instead of "Title" it should have been "title" and etc
I am using Bootstrap 3 in responsive mode. Is it possible to embed a region or regions on the site to be fixed rather then responsive. A fixed width table, for example?
Sure! Just don't use class="table" attribute on table definition.
<div class="container">
<div class="row">
<div class="col-md-8">
<table width="200">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td>cell3</td>
<td>cell4</td>
</tr>
</table>
</div>
<div class="col-md-4">sidebar</div>
</div>
</div>
Example https://jsfiddle.net/DTcHh/16851/
I am working in asp.net mvc4 with Razor View. I am using angularJs with it. But in partial view angularJs is not working.
Here is my view code:
#using (Html.BeginForm("Create", "Requisition", FormMethod.Post, new { id = "RequisitionForm", ng_app = "" }))
{
#Html.ValidationSummary(true)
<div class="divSection">
<div class="divBox divSectionLeftLeft">
<label>Product</label>
</div>
<div class="divBox divSectionLeftRight">
<input type="text" id="ProductName" name="ProductName" ng-model="newItem.ProductName" />
</div>
<div class="divBox divSectionRightLeft">
<label>Quantity</label>
</div>
<div class="divBox divSectionRightRight">
<input type="text" id="Quantity" name="Quantity" ng-model="newItem.Quantity" />
</div>
</div>
<div class="divClear">
</div>
<div class="ContainerRowButton">
<button type="button" class="btn btn-primary btn-mini" ng-click="items.push(newItem); newItem={}">Add Req-Detail</button>
</div>
<div style="width: 800px; height: 160px; overflow-y: scroll">
<table class="table table-striped table-bordered" id="RequisitionDetailsTbl" ng-init="items=[]">
<thead>
<tr>
<th>Product
</th>
<th>Quantity
</th>
<th>Action</th>
</tr>
</thead>
<tr ng-hide="items.length">
<td colspan="3">No Requisition Added Yet. . .</td>
</tr>
<tbody ng-repeat="item in items">
<tr>
<td>{{item.ProductName}}
</td>
<td>{{item.Quantity | number:2}}
</td>
<td>
<button type="button" id="delReqDetail" ng-click="items.splice($index, 1);" class="btn btn-primary btn-mini">Delete</button>
</tr>
</tbody>
</table>
</div>
}
My _Layout is like this:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery, ~/bundles/jqueryui, ~/bundles/others")
Here "~/bundles/others" contains the angular.js.
I am not getting any error in firebug console. What wrong am I doing?
One more thing I am showing the partialview in popup window. The code Works fine if I don't use it in popup window.