I have a shopping cart / order list that I bound to an array which worked fine.
I recently added a row number for each item added to the array, and also a button row.
The problem is I bound them to a current row like so
<div id="table">
<table class="table table-sm table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Product</th>
<th scope="col">Type</th>
<th scope="col">Attribute</th>
<th scope="col">Height</th>
<th scope="col">Width</th>
<th scope="col">Price</th>
<th width="1%" scope="col">Remove</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in table_products">
<td>{{ index +1 }}</td>
<td>{{ item.product }}</td>
<td>{{ item.type }}</td>
<td>{{ item.attribute }}</td>
<td>{{ item.height }}</td>
<td>{{ item.width }}</td>
<td>{{ item.price }}</td>
<td><button class="btn btn-danger" #click="deleteRow(index)">X</button></td>
</tr>
</tbody>
</table>
</div>
</div>
I never had a problem because the bound item values were null so the row was never created. But now Index and the button create the first row of the table.
Is there a way I can clear the array on page load, or am I going at this the wrong way?
edit : added my vue component for context
var table_products = new Vue ({
el : '#table',
data : {
table_products : [{
}]
},
I initialized table_products [{}] instead of []
It had an empty object in the array from initialization so it had an element.
Initializing an empty array instead fixed this issue as it did not have an element.
Thanks to Phil in the comments
Related
In the controller, I receive the data from the database and then I assign the relevant list to the function that will run all the functions in this controller. This list returns to view here I will show the data in the table but ... is undefined error
now i will share with you my functions in controller
public function table_backlog()
{
$dailyData=\DB::table('backlogs')->get()->toArray();
//dd($dailyData);
return ['dailyData'=>$dailyData];
}
protected function getAllBChart() {
return view('deneme',[
'table_backlog'=>$this->table_backlog()]);
}
View.blade:
<div class="row justify-content-center">
<div class="col-auto">
<table class="table table-responsive">
<thead>
<tr>
<th>Incident No</th>
<th>Assignment Group</th>
<th>Open Group</th>
<th>Open Time</th>
<th>RN Short Name</th>
<th>Days</th>
<th>Brief Description</th>
</tr>
<thead>
<tbody>
#foreach($dailyData as $key => $row)
<tr>
<td>{{ $row->number }}</td>
<td>{{ $row->assignmentGroup }}</td>
<td>{{ $row->creatorGroup }}</td>
<td>{{ $row->opened }}</td>
<td>{{ $row->configuration }}</td>
<td>{{ $row->description }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var dailyData={!! json_encode($table_backlog['dailyData']) !!}
</script>
This line assigns the data from the controller to the variable. When I check with DD I can see the data
var dailyData={!! json_encode($table_backlog['dailyData']) !!}
I tried this but I get undefined error. My for loop doesn't work either
try this version coz error from array's key
#foreach($table_backlog['dailyData'] as $key => $row)
<tr>
<td>{{ $row['number']}}</td>
<td>{{ $row['assignmentGroup']}}</td>
<td>{{ $row['creatorGroup']}}</td>
<td>{{ $row['opened']}}</td>
<td>{{ $row['configuration']}}</td>
<td>{{ $row['description']}}</td>
</tr>
#endforeach
I am using DataTables for my project but its sorting function does not work properly. I have tried every single solutions in here but none of them worked for me as well as it does not show the error in the console. I think in my code there is a jQuery conflict. How can I solve this issue? any help?
<table id="dtBasicExample" class="table table-bordered table-hover contact-list" cellspacing="0"
width="100%">
<thead>
<tr>
{# <th scope="col"><input type="checkbox"></th>#}
<th scope="col">Name</th>
<th scope="col">Company Name</th>
<th scope="col">Email</th>
<th scope="col">Phone Number</th>
</tr>
</thead>
{% for contact in contacts %}
<tbody>
<tr data-id="{{ contact.id }}" class="clickable-row"
data-href="{% url 'contact-detail' contact.id %}"
style="cursor: pointer; ">
{# <th scope="row"><input type="checkbox" id="check"></th>#}
<td>{{ contact.client_name }}</td>
<td>{{ contact.client_company_name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.work_phone }}</td>
</tr>
</tbody>
{% endfor %}
</table>
{% csrf_token %}
$('#dtBasicExample').DataTable();
$('.dataTables_length').addClass('bs-select');
as you can see it is a material bootstrap design datatables. In the example shown it works but when i add to my project it does not.
Your html table is "not valid" (It is valid if you want to create multiple table into an parent table). This can make some issue with Datatable. I think sorting is done, but you do not see it, because it sort by tbody tag and there is one line sorted by tbody. The tbody tags are not sorted only the tr inside
Try to remove the tbody into your loop and export it outside the for loop.
<tbody>
{% for contact in contacts %}
// ...
{% endfor %}
</tbody>
Note: cellspacing="0" is an old version of html. You can replace it by the css property border-spacing
I have table like this which i want to sort by clicking header of table.
I am following this tutorial
http://www.srccodes.com/p/article/27/make-html-table-sortable-jquery-tablesorter-plugin
This is working fine for manually added data to table but for dynamically added by angular it is not working.
<table class="table table-bordered tablesorter" id="myDummyTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>age</th>
<th>Birth Date</th>
<th>Join date</th>
<th>Marks 1</th>
<th>Marks 2</th>
<th>Status</th>
</tr>
</thead>
<tbody class = "smaller">
<tr ng-repeat="show in showdata">
<td>{{ show.name }}</td>
<td>{{ show.age }}</td>
<td>{{ show.birthdate}}</td>
<td>{{ show.joindate}}</td>
<td>{{ show.mark1 }}</td>
<td>{{ show.mark2 }}</td>
</td>
</tr>
</tbody>
</table>
Is there any other way to do this or I am doing it wrong?
This Might help you.
Call $("table").tablesorter(); after appending data to the table DOM.
$(document).ready(function () {
$("#myDummyTable").tablesorter();
});
i am newbie at AngularJS and in now trying to learn it. This time i am learning how to create one page app using codeigniter and angular with RESTful lib.
I have JSON like this :
[{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]
i just cannot fetch it to $scope with ng-repeat working no matter what i do. This is my function :
$http.get('Api/items').then(function(response)
{
$scope.items = response;
console.log(response);
});
and this is my table view :
<table class="table table-bordered pagin-table">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Description</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x.title }}</td>
<td>{{ x.description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
This is what happen when those all executed :
no array fetched by $scope at all. weird thing is the <tr> is repeated 5 time without any value. but when i call array[0] the $scope can fetch it :
<table class="table table-bordered pagin-table">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Description</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x[0].title }}</td>
<td>{{ x[0].description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
Where did i go wrong?? can someone help me??
It is because the promise returning raw HTTP response from the server rather than parsed result data. You should try this instead :
$http.get('Api/items').then(function(response)
{
$scope.items = response.data;
console.log(response);
});
#digit already pointed the issue in you $hhtp call. Now For this JSON:
[{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]
.
No need to give index number inside ng-repeat. //{{ x[0].title }}
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x.title }}</td>
<td>{{ x.description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
I have a table that lists several objects in an array using ng-repeat and I was wondering, if there is an easy way to let the user select one of these objects by clicking on the row and viewing them in a separate <div>.
Here's the table:
<table class="table">
<tbody class="table-hover">
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Approver</th>
</tr>
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
</tbody>
</table>
Let's say the user clicked on the first row. He would now see a <div> that contains all the information in this row for that object.
<div>
{{campaigns[].name}}
...
</div>
It could be achieved by several way. One of them as below.
<table class="table">
<tbody class="table-hover">
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Approver</th>
</tr>
<tr ng-repeat-start="campaign in campaigns | filter: query" contenteditable="true" ng-click="campaign.showDetails = !campaign.showDetails">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
<tr ng-repeat-end ng-show="campaign.showDetails">
Your can dispalay here rest of the information from campaign object.
</tr>
</tbody>
You could seed the example http://codepen.io/anon/pen/beNbwp
Ok, so if I understand your problem, the solution could be to use ng-click :
(considering campaign.name unique for each campaigns)
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true" ng-click="doSmth(campaign.name)">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
Then in your controller :
$scope.doSmth = function(campName) {
$state.go(campName); //example
};
Another solution, using ui-sref :
Considering you define a url: '/folder/campaignPage?name' in your $stateProvider.
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true" ui-sref="campaignPage({ name: campaign.name })">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
Another way u can do it easily if u also create a button in ng-repeat like
<td><input type="button" value="select" class="btn btn-info btn-sm" ng-click="populate(campaign )" /></td>
And then
$scope.populate = function (campaign) {
$scope.Name = campaign.Name;
}
It's simple to use.