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
Related
I'm having a problem with my table when I scroll to the right
this is my code
TableComponent.vue
<div id="main-container">
<table class="maint-table">
<thead id="table-header">
<tr>
<th class="dates"> </th>
<th v-for="data in dateHeader">{{data}}</th>
</tr>
<tr>
<th class="title"> </th>
<th v-for="data in dayOfWeek">{{data}}</th>
</tr>
</thead>
<tbody id="table-body" #scroll="fixedScroll">
<table_block :table_data="dataHeader"></table_block>
<table_block :table_data="allData"></table_block>
</tbody>
</table>
</div>
...
...
...
<script>
components: {
table_block
},
methods: {
fixedScroll() {
fixedScroll(event) {
var thead = document.getElementById("table-header");
var tbodyScroll = document.getElementById("table-body").scrollLeft;
thead.scrollLeft = tbodyScroll;
}
</script>
I made a props to pass the data to my TableBlock to loop through the data and display it on the table. This is my TableBlock Code.
TableBlock.vue
<template>
<div>
<tr v-for="row in table_data">
<td>
<div class="drop-down-container"><span class="drop-down-controller"">{{ row.title }}</span></div>
</td>
<td v-for="cel in row.data" class="group-header">{{ cel }}</td>
</tr>
</div>
</template>
When I scroll it to the right, the first column must freeze but it's not.
I tried to create a dummy data inside TableComponent.vue with a normal HTML Table without passing the data to another component using props, it works perfectly. But when I use these codes, it doesn't work correctly.
Scenario
Let say I have 10 columns in the table, when I scroll it to the right, the 1st column will stick which is normal but when the 10th column reach to 1st column, the 1st column will scroll away together with the 10th column.
I'm trying my best to illustrate the scenario but this is the best that I can do. If someone can help, please help me.
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();
});
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
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 ) {
I am using - Bootstrap table
I cannot figure out, how do i pass a model to the data-url property of bootstrap-table ?
My Razor Code:
#model IEnumerable<MyModel>
<table id="myTable" data-url=......">
<thead>
<tr>
<th data-field="MyProperty">
Some Example
</th>
<th data-field="MyProperty2">
Some Example
</th>
<th data-field="MyProperty3">
Some Example
</th>
</tr>
</thead>
</table>
My Controller Code - just in case.
[HttpGet]
public ActionResult GetMyValues()
{
List<MyTable> myList = myObj.GetValues();
return PartialView("MyPartialView", myList);
}
You will need to convert your Model i.e IEnumerable using below code
var data = #Html.Raw(Json.Encode(#Model));
then bind this data to html table
$(function () {
$('#table').bootstrapTable({
data: data
});
});