All:
I wonder how to append different elements in D3 .data().enter(), for example:
If I want to append table column, but instead append every column as td I want the first column as th, so the code looks like:
tbody.append("tr").selectAll("anyplcaeholder").data([1,2,3,4])
.enter()
// I do not know how to do this folloing
Any idea? Thanks
You could use this:
var table = d3.select('body').append('table');
var tr = table.selectAll('tr')
.data([1,2,3,4,5]).enter()
.append('tr');
tr.append('th').html(function(d) { return d; }); // add your condition here
tr.append('td').html(function(d) { return " "; }); // if you need more
tr.append('td').html(function(d) { return " "; }); // columns with data
This code give you something like this:
<table>
<tr>
<th>1</th>
<td> </td>
<td> </td>
</tr>
<tr>
<th>2</th>
<td> </td>
<td> </td>
</tr> .....
The right way to add column header to a table
Here the working jsFiddle
Related
i have created vue file to display data in frontend. but i'm unable to print 2 tables on same page at same time. only table 2 is displaying data , in first table it shows data for 2 seconds and than disappears. what i'm doing wrong? please help. i am super new in vuejs and have not much knowledge.
here is my index.vue file,
Table 1
<tbody>
<tr
v-show="items && items.length"
v-for="(data, i) in items"
:key="i">
<td></td>
<td></td>
</tr>
and this is function code,
async fetchData1() {
this.$store.state.operations.loading = true;
let currentPage = this.pagination ? this.pagination.current_page : 1;
await this.$store.dispatch("operations/fetchData", {
path: "/api/calldata?page=",
currentPage: currentPage + "&perPage=" + this.perPage,
});
table 2
<tbody>
<tr
v-show="items && items.length"
v-for="(data, i) in items"
:key="i">
<td></td>
<td></td>
</tr>
and here is the function for table 2
async fetchData2() {
this.Loading2 = true
let currentPage = this.Pagination2 ? this.Pagination2.current_page : 1;
await this.$store.dispatch("operations/fetchData", {
path: "/api/datacall/data2?page=",
currentPage: currentPage + "&perPage=" + this.perPage,
});
this.Loading2 = false;
and this are the controller functions
public function index(Request $request)
{
return DataResource::collection(Datamodl::with('user')->where('type',1)->latest()->paginate($request->perPage));
}
public function index2(Request $request)
{
return DataResource::collection(Datamodl::with('user')->where('type',0)->latest()->paginate($request->perPage));
}
And Route ,
Route::get('/calldata/data2', [DataController::class, 'index2']);
Route::apiResource('calldata', DataController::class);
Observation : You are updating same variable which is items for both the tables. Hence, it is overriding the latest items with the old items array.
Solution : Here is the implementation as per my comment.
new Vue({
el: '#app',
data: {
table1Items: null,
table2Items: null
},
mounted() {
this.fetchData1();
this.fetchData2();
},
methods: {
fetchData1() {
this.table1Items = [{
id: 1,
name: 'table 1 alpha'
}, {
id: 2,
name: 'table 1 beta'
}]
},
fetchData2() {
this.table2Items = [{
id: 1,
name: 'table 2 alpha'
}, {
id: 2,
name: 'table 2 beta'
}]
}
}
})
table, th, td {
border: 1px solid black;
margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<thead>
<th>ID</th>
<th>Name</th>
</thead>
<tbody>
<tr v-show="table1Items" v-for="(data, i) in table1Items" :key="i">
<td>{{ data.id }}</td>
<td>{{ data.name }}</td>
</tr>
</tbody>
</table>
<table>
<thead>
<th>ID</th>
<th>Name</th>
</thead>
<tbody>
<tr v-show="table2Items" v-for="(data, i) in table2Items" :key="i">
<td>{{ data.id }}</td>
<td>{{ data.name }}</td>
</tr>
</tbody>
</table>
</div>
you are using same property which is items for both. so second request will changed first items. so in both table same data will visible. you have to store in different state property for different data rendering.
solution :
make another action fetchData2.
call another mutation setItems2. add state propery item2: []. and setItems2 value from this mutation.
render second table like this.
<tr
v-show="items2.length"
v-for="(data, i) in items2"
:key="i">
<td></td>
<td></td>
</tr>
For code quailty:
give proper and related variable name . don't use items1 and items2 like that.
never used v-if/v-show and v-for in same element.for more info
use template first in this senerio.
use the item's unique id instead of the index in the key.
if you take the items default value as [], instead of null, then you only required to check items.length instead of items && items.length. so always use list default value []
if both requests are not dependent on each other then you should use Promise.all() for fetching data concurrently. which saved tremendous time and also in this case you don't require two loading property.
I want to fill and insert a lot of duplicates into the database. In the same table But i don't know how to write code on the controller. Laravel
html
<table class="table ">
<thead>
<tr>
<td width="5%"><center>ลำดับ</center></td>
<td width="20%"><center>เลขบัญชี</center></td>
<td width="40%"><center>ชื่อบัญชี</center></td>
<td width="35%"><center>จำนวนเงิน</center></td>
<td width="10%"><center></td>
</tr>
</thead>
<tbody class="resultbody">
</tbody>
</table>
Script
$(function () {
$('.add').click(function () {
var n = ($('.resultbody tr').length - 0) + 1;
var tr =
'<tr><td width="5%" class="no" name="svae_no"><center>' + n + '</center></td>' +
'<td width="20%"><input type="text" class="name form-control" name="rows[0][save_id]"></td>'+
'<td width="40%"><input type="text" class="fname form-control" name="rows[0][save_name]"></td>'+
'<td width="35%"><input type="text" class="fname form-control" name="rows[0][save_money]"></td>'+
'<td width="10%"><input type="button" class="btn btn-danger delete" value="x"></td></tr>';
$('.resultbody').append(tr);
});
$('.resultbody').delegate('.delete', 'click', function () {
$(this).parent().parent().remove();
});
});
controller add data
public function add(Request $request){$save_no = $request->input('save_no');
$save_id = $request->input('save_id');
$save_name = $request->input('save_name');
$save_money = $request->input('save_money');$data_save=array(
'mem_died_id'=>$mem_died_id,
'save_no'=>$save_no,
'save_id'=>$save_id,
'save_name'=>$save_name,
'save_money'=>$save_money);
DB::table('died_save')->insert($data_save);return back();
If we work on big project and then we maybe require to add multiple rows on database using laravel eloquent. Laravel provide insert method for bulk records create on db.
In bellow example you can see i use multidimensional $myItems array variable and that insert multiple records same time using DB::insert(). So let's see and try this.
Example:
$myItems = [
['title'=>'HD Topi','description'=>'It solution stuff'],
['title'=>'HD Topi 2','description'=>'It solution stuff 2'],
['title'=>'HD Topi 3','description'=>'It solution stuff 3']
];
DB::table("items")->insert($myItems);
I have some data and I am trying to figure out how I can display it in table format in rows and columns in Vue Js. The display should be as shown:
this is my code but only displays in one column only but need to split the data into rows and columns
<table>
<tbody>
<tr v-for="product in products">
<td>{{product.item_name}}</td>
</tr>
</tbody>
</table>
Using this function you can sort the initial array to be in three sections: (Make it a vue method).
function sortList(list, rows) {
const sortedList = [];
let rowIndex = 0;
for (i = 0; i < rows; i++) {
sortedList[i] = [];
}
list.forEach(item => {
sortedList[rowIndex++].push(item);
if ((rowIndex + 1) === rows) {
rowIndex = 0;
}
});
return sortedList;
}
Then you can set:
this.products = this.sortList(list, 3);
list being the initial array and 3 being the number of rows you want.
Then in the template you can do:
<table>
<tbody>
<tr v-for="row in products">
<td v-for="item in row">{{ item.item_name }}</td>
</tr>
</tbody>
</table>
There is a way to make visible a <br> inside a cell using jquery-bootgrid? Because the render of <br> is not visible.
What I understand is that you want to add a line break in your data, something like this,
In the features column I am passing an array and it displays each Item in a separate row using <br>
For this you can create a custom converter,
http://www.jquery-bootgrid.com/Documentation#converters
You can create the converter when initializing the BootGrid Table
var dt = $('#myTable').bootgrid({
//.......... Other Options
converters: {
listDisplay: {
from: function(value) {
return value;
},
to: function(value) {
// Here you can customise value - I have an Array which I join using <br>
value.sort();
value = value.join("<br/>");
return value;
}
}
}
});
Then all you have to do in the Table HTML is set the data-type on the Column heading
<table id="myTable">
<thead>
<tr>
<th data-column-id="Id" data-visible="false" data-identifier="true" data-type="numeric">Id</th>
<th data-column-id="SelectedFeaturesNames" data-type="listDisplay">Features</th>
<!-- Note the data-type on the Features <th> is listDisplay -->
</tr>
</thead>
<tbody></tbody>
</table>
Did it work using that method?
Yes #Dawood Awan ! It worked for me
PHP:
<td>
<?php
$test = ['b', 'a', 'c'];
echo json_encode($test);
?>
</td>
JS:
to: function(value) {
value = JSON.parse(value); //convert received json to js array.
value.sort();
value = value.join("<br/>");
return value;
}
I have the following Razor lines for now:
<table border=1 cellpadding=3 cellspacing=1 rules="rows" frame="box">
<tr>
<th>Türkçe Söz Dizisi</th>
<th>English Word Sequence</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Tr)
</td>
<td>
#Html.DisplayFor(modelItem => item.En)
</td>
<td>
#Html.ActionLink((String)#ViewBag.Edit, "Edit", new { id=item.ID }) |
#Html.ActionLink((String)#ViewBag.Delete, "Delete", new { id=item.ID })
</td>
</tr>
}
</table>
However, I will add some columns automatically from the program to database table. I need a way to print this th's and td's accordingly. In short, I need a way to go through Model's dynamic columns. How can I achieve this?
EDIT: My Model type here is "Proposal". However, I want to reach dynamic attribute of Proposal.Type.Word(Tr, En, or any other added Language Enum). How can I?
#foreach (var item in Model) {
Type objectType = Type.GetType(typeof(RexamOneriSistemi.Models.Word).AssemblyQualifiedName);
System.Reflection.PropertyInfo[] fields = objectType.GetProperties();
<tr>
<td>#Html.DisplayFor(modelItem => item.ID)</td>
<td>#Html.DisplayFor(modelItem => item.Owner.Name)</td>
#foreach (System.Reflection.PropertyInfo f in fields) {
if (f.Name.ToString() == #HttpContext.Current.Session["Language"].ToString())
{
<td>
// What to do here exactly to get item.Type.Word.[dynamic attribute]?
</td>
}
</tr>
}
I can get Razor String
string s = "#Html.Displayfor(modelItem => item.Type.Word." + System.Web.HttpContext.Current.Session["Language"] + ")"
Resulting: #Html.Displayfor(modelItem => item.Type.Word.Tr)
Can I insert a string to be rendered as Razor Syntax? If yes, how?
I have tried this code and it works
<table border=1 cellpadding=3 cellspacing=1 rules="rows" frame="box">
<tr>
#{
Type objectType = Type.GetType(typeof(yourProjectNamespace.Models.Language).AssemblyQualifiedName);
System.Reflection.PropertyInfo[] fields = objectType.GetProperties();
foreach (System.Reflection.PropertyInfo f in fields)
{
<th> #f.Name.ToString() </th>
}
}
</tr>
#foreach (yourModelType item in Model) {
<tr>
foreach (System.Reflection.PropertyInfo f in fields)
{
<td>#Html.Display(f.Name.ToString())</td>
}
<td>
#Html.ActionLink((String)#ViewBag.Edit, "Edit", new { id=item.ID }) |
#Html.ActionLink((String)#ViewBag.Delete, "Delete", new { id=item.ID })
</td>
</tr>
}
</table>
To get Assemply Qualified Name of your class , see this link here
Came across this question, wrote this maybe it will help someone else. This code will dynamically load your model into a table.
#model System.Collections.Generic.List<App.Client.Models.MyModel>
<table>
<thead>
<tr>
#foreach (var property in Model.GetType().GetGenericArguments()[0].GetProperties())
{
<th>#property.Name</th>
}
</tr>
</thead>
<tbody>
#foreach (var modelItem in Model)
{
<tr>
#foreach (var property in modelItem.GetType().GetProperties())
{
<td>#property.GetValue(modelItem)</td>
}
</tr>
}
</tbody>
</table>