Popover in Bootstrap table with filter control not working (after fltering) - twitter-bootstrap-3

I have set a bootstrap table with the filter control extension. The table where I want to filter offers many popovers and tooltips. However, they stop working after filtering. What can I do to re-activate them?
An example of my code can be seen here (Location Type "Other" should have a popover, this works only before filtering for the first time):
<table ref="mainTable" class="table table-striped table-bordered table-hover"
cellSpacing="0" id="mainTable" data-show-toggle="true"
data-show-columns="true" data-search="true" data-pagination="true" data-filter-control="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="CustomerName" data-sortable="true" data-filter-control="select">Customer Name</th>
<th data-field="LocationType" data-sortable="true">Location Type</th>
<th data-field="Location" data-sortable="true" data-filter-control="select">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Cap Corp</td>
<td>Main</td>
<td>Norwalk CT 06851</td>
</tr>
<tr>
<td></td>
<td>Cap Corp</td>
<td><a class="ajaxPopover">Other</a></td>
<td>Norwalk CT 06851</td>
</tr>
<tr>
<td></td>
<td>Tel</td>
<td>Main</td>
<td>Slough SL1 4DX</td>
</tr>
<tr>
<td></td>
<td>Tel</td>
<td><a class="ajaxPopover">Other</a></td>
<td>London W1B 5HQ</td>
</tr>
</tbody>
</table>
... with the following javascript code:
$('#mainTable').bootstrapTable({
});
// Add some popovers
$('.ajaxPopover').popover({
html: true,
placement: "auto right",
container: 'body',
content: "<b>Text</b> Other Text"
});
http://jsfiddle.net/7bpLrafx/4/
Thanks for any help!

You have to reinitialize popovers when changes are made in the table (like sorting, change of display and so on).
JS:
$('#mainTable').on('all.bs.table', function () {
$('.ajaxPopover').popover({
html: true,
placement: "auto right",
container: 'body',
content: "<b>Text</b> Other Text"
});
});

You can use Bootstrap's built-in functionality to reinitialize the popovers after table filtering in DOM:
$('#mainTable').on('post-body.bs.table', function () {
$('.ajaxPopover').popover();
});

Related

How to make subtitles in Quasar table

I working on Vue3 with Quasar/cli.
How to make this category dividers (blue subtitles) with Quasar component qTable or qMarkupTable? screen
Ive tried to figure out body slots but I couldnt
Link to qTable API doc
https://quasar.dev/vue-components/table#introduction
Link to qMarkupTable API doc
https://quasar.dev/vue-components/markup-table#introduction
For QMarkupTable, add a row whose TD spans all the columns:
<q-markup-table>
<thead>
<tr>
<th>№</th>
<th>Name</th>
<th>Code</th>
<th>Diff</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary text-white">
<td colspan="4">Medicines</td>
</tr>
<tr>
<td>1</td>
<td>Mukosolvan</td>
<td>101492</td>
<td class="text-negative">1</td>
</tr>
</tbody>
</q-markup-table>
QMarkupTable is a regular HTML table - it just applies the proper styling on it, everything else is the same HTML you've been studying as a student.

How to build a real-time editable data table in Vue.js

I have json data in the following format.
{ "Employees" : [ { "userId":"rirani", "jobTitleName":"Developer", "firstName":"Romin", "lastName":"Irani", "preferredFullName":"Romin Irani",
"employeeCode":"E1", "region":"CA", "phoneNumber":"408-1234567", "emailAddress":"romin.k.irani#gmail.com" }, { "userId":"nirani", "jobTitleName":"Developer",
"firstName":"Neil", "lastName":"Irani", "preferredFullName":"Neil Irani", "employeeCode":"E2", "region":"CA", "phoneNumber":"408-1111111",
"emailAddress":"neilrirani#gmail.com" }, { "userId":"thanks", "jobTitleName":"Program Directory", "firstName":"Tom", "lastName":"Hanks",
"preferredFullName":"Tom Hanks", "employeeCode":"E3", "region":"CA", "phoneNumber":"408-2222222", "emailAddress":"tomhanks#gmail.com" } ] }
So, I am trying to display it in a table. So, How can I make the user to select the fields, so that only those data from these fields are needed to display.
So, If a user select userID,employeeCode, Then I need to display only those values in the table. So, if he needed to select other fields, I should give a provision and data is needed to be changed based on the selection.
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Region</th>
<th scope="col">Phone</th>
</tr>
</thead>
<tbody>
<tr v-for="(customer,index) in filteredCustomers">
<th scope="row">{{customer.userId}}</th>
<td>{{customer.firstName}}</td>
<td>{{customer.region}}</td>
<td>{{customer.phoneNumber}}</td>
</tr>
</tbody>
</table>
So, how can I change the fields and correspondingly data values
Try this
I hope this is what you are looking for https://github.com/allenshaji/vue-editable-table

Dynamic user selectable filter for DataTable

Is there a way to give option to user select dynamically what type of filter they want applied to one or more columns?
We are using DataTables jquery plugin for display. I'm looking into yadcf plugin to use for filtering(Open to other options as well).
yadcf is super versatile in being able to define filters for each column at design time but we want the ability for the user to select the filter type at runtime. I'm looking into the yadcf code to understand how to do this but any pointers, ideas and helpful hints would be greatly appreciated.
Thanks,
Ok I did just a simple example allowing user to define to enable/disable filtering for each column. You may extend this by placing more dropdowns and asking what type of filtering they want.
fiddle
https://jsfiddle.net/ergec/6yjrrjyr/
html
Col 1:<select class="colfiltering" data-colnumber="0">
<option value="">No</option>
<option value="1">Yes</option>
</select>
Col 2:
<select class="colfiltering" data-colnumber="1">
<option value="">No</option>
<option value="1">Yes</option>
</select>
<button id="inityadcf">
Apply Filters To Table
</button>
<br>
<br>
<br>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>2</td>
</tr>
<tr>
<td>Row 2</td>
<td>1</td>
</tr>
<tr>
<td>Row 1</td>
<td>10</td>
</tr>
</tbody>
</table>
javascript
var myTable = $('#table_id');
myTable.DataTable();
$("#inityadcf").click(function() {
var colfiltering = [];
$(".colfiltering").each(function() {
var $that = $(this);
if ($that.val()) {
colfiltering.push({
column_number: $that.data("colnumber")
});
}
});
myTable.DataTable().destroy();
myTable.DataTable();
yadcf.init(myTable.DataTable(), colfiltering);
});

Header row for editorfor template

I have a view in MVC4 that looks like this:
#model List<Home.Models.Model>
#{
ViewBag.Title = "DPR";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#using (Html.BeginForm("AgendaNotes", "Home", FormMethod.Post, new { #id = "formDPR"}))
{
<table style="font-size:xx-small">
<thead>
<tr>
<th>Name</th>
<th>DOD ID</th>
<th>Last Review</th>
<th>Include?</th>
<th>Reason</th>
<th>Notes</th>
</tr>
</thead>
</table>
<div style="background-color:white">
#Html.EditorForModel()
</div>
<div>
</div>
}
And the model.cshtml is simply some of the fields in a single row. I don't want to put headers on that single row as they are repeated as many times as their are in the list. Is there a simple way to make a header for the rows of the model in the editorfor template?
This is how I did it:
<table style="font-size:xx-small" class="table_body">
<thead>
<tr>
<th>Name</th>
<th>DOD ID</th>
<th>Last Review</th>
<th>Include?</th>
<th>Reason</th>
<th>Notes</th>
</tr>
</thead>
#for (var i = 0; i < Model.Count; i++)
{
<tr>
#Html.EditorFor(m=>Model[i])
</tr>
}
</table>
And in the model.cshtml it simple some of the fields each in a TD element.
Not 100% sure that I understand you correctly. Create the table header in the view, then call the EditorTemplate in a for each
#using (Html.BeginForm("AgendaNotes", "Home", FormMethod.Post, new { #id = "formDPR" }))
{
<table style="font-size:xx-small">
<thead>
<tr>
<th>Name</th>
<th>DOD ID</th>
<th>Last Review</th>
<th>Include?</th>
<th>Reason</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Details)
{
#testTemplate(item)
}
</tbody>
</table>
}
Then change the editor template to be for only one row eg.
#helper testTemplate(Details detail)
{
<tr>
<td>#detail.Propery1</td>
<td>#detail.Propery2</td>
</tr>
}
I used an inline helper just to illustrate what I mean. Now you should have a table with one header and lots of rows

How to set css of dataTable after reload?

There is a dataTable :
<table id="list_details_livraison" class="striped cell-hovered border bordered" data-searching="true">
<thead>
<tr>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.article');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.lot');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.qtelivrer');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.pu');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.taxe');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.remise');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.prixtotal');?></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
$(document).ready(function(){
var list_details_livraison = $('#list_details_livraison').DataTable({
...
"initComplete": function(settings, json) {
$(this).css("table-layout","fixed");
}
});
Then I filter the dataTable by selecting a value from a select element :
$('#cacher').on("change", function() {
var ddeb = convertDateFormat3($("#date_deb_").val());
var dfin = convertDateFormat3($("#date_fin_").val());
list_details_livraison.ajax.url("<?php echo RP_SSP; ?>server_processing_livraisons_frnsr.php?ddeb="+ddeb+"&dfin="+dfin+"&type="+$("#h_filtre_type_livraison").val()+"&valider="+$("#h_filtre_etre_valider").val()).load();
});
At runtime the dataTable's columns are not autowidth after I make the filter ; I tried using list_details_livraison.css("table-layout","fixed"); but I got a console error ! So how to reapply the table-layout fixed css at this moment ?
Comment converted into an answer at the request of the OP.
initComplete() will only run once per table creation, so won't be called after subsequent paging, filtering etc. For this you need drawCallback() which gets called after every draw.
You just need to change:
"initComplete": function(settings, json) {
to
"drawCallback": function( settings ) {