I currently have the following:
<table class="table table-striped">
<tr>
<th> Artikelbild </th>
<th> Artikelnummer </th>
<th> Name des Artikels </th>
<th> Beschreibung </th>
<th> Preis </th>
<th> Kategorie </th>
</tr> #foreach($products as $product)
<tr class='clickable-row' <?php if($product->stockCount === 0) echo "style='color:red;'";?>data-href="{{url('/product')}}
<?php echo '/'.$product->id;?>">
<td> <img src="/images/{{$product->imageUrl}}" class="productImageSmall" /> </td>
<td> {{$product->id}} </td>
<td> {{$product->name}} </td>
<td>
<?php if (strlen($product->description) > 30) { $productShortened = substr($product->description, 0, 30) . "[...]"; } else { $productShortened = $product->description; } echo $productShortened; ?> </td>
<td>
<?php echo number_format($product->price, 2, ',', '.');?>€ </td>
<td> {{$product->categoryName}} </td>
</tr> #endforeach
</table>
The $product thing is passed from my controller with the paginate() option.
Now I want that this table is sort-able by one column. So lets say, the user clicks on the "price" (or Preis in german) column on top of the table, then all results should be sorted by the price (from low to high or from high to low), same for the category, for the name and every other column.
How can I do this? Do I have to reload the page and get the data again from the db, but somehow sorted (if yes, how?). Or can I somehow just sort it without reloading it? How can I do this?
Thanks for any help
Building sortable tables is a pretty time-consuming task, so I'd recommend you to use some package. I use this package for building sortable tables.
If you still want to build this functionality by yourself, you can add arguments like ?price=desc to the URL and get these with the request() method. Just an example:
if (request()->has('price')) {
$query = $query->orderBy('price', request('price'));
}
And don't forget to append URL arguments to the pagination links:
{{ $products->appends(['price' => 'desc'])->render() }}
Related
I'm new to mvc and html/js both.
So the basic idea of what I am trying to do is:
Dropdown(used to select bookTitle)
Labels below get auto populated with selected book details from dropdown(id,title,author,price,quantity,etc)
Button on the side of these labels which will add this obj into a List
Whole list will then be used for checkout
I'm stuck with the auto-populated labels and add button
Would be a grateful if anyone would be willing to help me
Here is my code:
'''
#model IEnumerable<BookWebApp.Models.Books>
#{
ViewData["Title"] = "OrderBooks";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<html>
<center>
<h1>OrderBooks</h1>
<hr/>
<div id="Title">
<select id="Title_Select">
<option value="" selected-disabled>
Book Names
</option>
#foreach(var item in Model)
{
<option value=#item.Title>
#item.Title
</option>
}
</select>
</div>
<button onclick="getValue()"> Check Details</button>
<hr/>
<div>
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.BookID)
</th>
<th>
#Html.DisplayNameFor(model => model.Title)
</th>
<th>
#Html.DisplayNameFor(model => model.Author)
</th>
<th>
#Html.DisplayNameFor(model => model.Price)
</th>
<th>
#Html.DisplayNameFor(model => model.Quantity)
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
//labels for obj here
</tr>
</tbody>
</table>
</div>
</center>
'''
To populate the list you can do as you did with the DropdownList with a foreach and insert all the fields in the order of the header and on the last one check with value id.
Finally, a push button for the with an onclick function.
In the onclick function you scroll through the list and take Id of all the checkboxes that have the checked property.
You now have the list of all the selected books.
if you want I can give you an example but I suggest you see for yourself that it is much more instructive, tell me if you want the example
There are two ways you can add the labels to the list and then bring the list to the Checkout page, use ajax to post data or use MVC submission. I would recommend the first one (using ajax) because the page will not be refreshed.
Solution 1: Use ajax
Create a Controller method to save the record
Whenever the user click on the button, make an ajax call to post the item to the method, save it to somewhere (Persistence database or cache)
When user navigate to the check-out page, retrieve the list and display to the user
Also you may want to add a remove button for easily manage.
Here's the code to populate the labels:
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.BookID)
</th>
<th>
#Html.DisplayNameFor(model => model.Title)
</th>
<th>
#Html.DisplayNameFor(model => model.Author)
</th>
<th>
#Html.DisplayNameFor(model => model.Price)
</th>
<th>
#Html.DisplayNameFor(model => model.Quantity)
</th>
<th>
<!-- This one is for the add button -->
</th>
</tr>
</thead>
<tbody>
#foreach(var label in Model.Labels)
{
<tr class="table-row">
// labels for obj here
<td class="label-id">#label.Id</td>
<td class="label-id">#label.Title</td>
<td class="label-id">#label.Author</td>
<td class="label-id">#label.Price</td>
<td class="label-id">#label.Quantity</td>
<td>
<button class="btn-add-to-collection" onclick="addLabel(this)"></button>
</td>
</tr>
}
</tbody>
<script>
function addLabel(el) {
// query for the properties value then use ajax to post the data to controller
// also save it to the current page state for easily modify
}
</script>
There are multiple methods to achieve your goal to auto populate label data:
Set Attribute values to your select which comprise of details of books.
1.1. Implement an onChange function for your select which will populate data from Select attribute in your labels.
Implement an onChange function for your select which will send an ajax call to your controller.
2.1. Retrieve values from controller and populate relevant values in labels
Create a separate button, on its onClick send an ajax call to your controller.
3.1. Retrieve values from controller and populate relevant values in labels
Now coming to Adding data in list:
Why providing separate buttons for all labels?
Why not add a button Proceed to check out?
And for that you can do:
$.each($(table).find('tbody tr'), function (j, row) {
});
in this code you get all your label values and push them in the list proceed as you please
I hope this helped, if you need code snippets for above mentioned processes, let me know, I will update my answer accordingly.
Edit 1, Solution 1
<div>
<center>
<h1>OrderBooks</h1>
<hr />
<div id="Title">
<select id="Title_Select" onchange="SelectOnChange()">
<option value="" selected-disabled>
Book Names
</option>
#foreach (var item in Model)
{
<option value=#item.BookID>
#item.Title
</option>
}
</select>
</div>
<hr />
<div>
<table class="table" id="BooksTable">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.BookID)
</th>
<th>
#Html.DisplayNameFor(model => model.Title)
</th>
<th>
#Html.DisplayNameFor(model => model.Author)
</th>
<th>
#Html.DisplayNameFor(model => model.Price)
</th>
<th>
#Html.DisplayNameFor(model => model.Quantity)
</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<hr />
<button onclick="ProceedCheckOut()"> Proceed to CheckOut</button>
</div>
</center>
</div>
$(document).ready(function () {
SelectOnChange = function () {
var BookId = $("#Title_Select :selected").val();
var URL = '/Underwriting/Case/GetBookDetailsById';
var _data = {
BookId: BookId
};
$.ajax({
url: URL,
type: "POST",
dataType: "html",
contentType: "application/json",
data: JSON.stringify(_data),
async: true,
success: function (result) {
var Books = JSON.parse(result);
var tr = '<tr>' +
'<td id="BookID">' + Books.BookID + '</td>' +
'<td id="Title">' + Books.Title + '</td>' +
'<td id="Author">' + Books.Author + '</td>' +
'<td id="Price">' + Books.Price + '</td>' +
'<td id="Quantity">' + Books.Quantity + '</td>' +
'</tr>';
$('#BooksTable > tbody').append(tr);
},
error: function (jqXHR, textStatus, errorThrown) {
$Extention.HideLoader();
_$.Notification("YOU MIGHT BE ENTERING WRONG VALUES.", 200);
}
});
}
ProceedCheckOut = function () {
var Books = new Object()
$('#BooksTable tbody tr').each(function (i, field) {
Books.BookID = parseInt($(field).find('#BookID').text());
Books.Title = $(field).find('#Title').text();
Books.Author = $(field).find('#Author').text();
Books.Price = parseFloat($(field).find('#Price').text());
Books.Quantity = parseInt($(field).find('#Quantity').text());
});
console.log(Books);
}
});
I have made minor changes to your code:
Implemented an onChange button, removed GetDetails button, In OnChange button i have called my controller function to get details from database against BookId.
Once i get book details from controller i render that data in my Ajax success
Created a Proceed to checkout button, this button gets data from table and inserts it in an object, now you can use that object to send book data to another page or your controller.
In case of further help please let me know
First time using StackOverflow.
I have a table with different data and I want to disable actionlink after two minutes
<table class="table">
<tr class="btn-danger">
<th>
#Html.DisplayNameFor(model => model._art.libelle)
</th>
<th>
Image
</th>
<th>
#Html.DisplayNameFor(model => model._art.prix_initial)
</th>
<th>
Prix Courant
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr class="btn-primary">
<td>
#Html.DisplayFor(modelItem => item._art.libelle)
</td>
<td>
<img src="#Url.Content(item._art.img)" width="300" height="300"/>
</td>
<td>
#Html.DisplayFor(modelItem => item._art.prix_initial)
</td>
<td>
#{ var prix_calcule = item.valeur_courante
* 0.1 * item._art.prix_initial
+ item._art.prix_initial;
}
#prix_calcule
</td>
<td id="test">
<h1>#Html.ActionLink("Encherir", "Encherir", new { id_article = item._art.id }, new { #class = "btn btn-success" })</h1>
</td>
</tr>
}
</table>
I want after two minutes the actionLink "encherir" to be disabled.
I've tried javascript but unfortunately, it will disable just the first row in the table.
Once you've delivered something to the browser, your control is very limited. There are ways to hide it with Javascript, but users can just turn javascript off, which would leave it up forever.
The best way to handle this, though, is still to hide it with Javascript, but then also include an expiration token in the link. Give it a unique, encrypted value as a GET argument that tells you when it expires. Then, if the user clicks on the link they shouldn't have after two minutes, you can decode that token and return a "Sorry, your link expired" page instead of the real one.
I create a table with dynamic data from mysql. He seems to :
screen
When I click on the delete button from the second row, and make an alert js with the value of id, he save the id from the first row and not in the row where I cliqued.
My Views :
$('.Btrash').click(function() {
//var id_stream = $('#id_stream').val();
var id_stream = $('#id_stream').attr('value');
var id_compte = $('#id_compte').val();
alert(id_stream);
});
<div class="row" id="Tstream">
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th>Feeds</th>
<th>Data request</th>
<th>Begin Stream</th>
<th>End Stream</th>
<th><em class="fa fa-cog"></em></th>
<th>Status</th>
<th>Access to Data</th>
</tr>
</thead>
<tbody >
<?php foreach ($aAllRequestByIdUser as $aRequestByIdUser) : ?>
<tr>
<td class="vert-align">
<input type="hidden" id="id_compte" value="<?= $iIdCompte ?>">
<input type="text" id="id_stream" value="<?= $aRequestByIdUser['id_Stream'] ?>">
...
My alert always show 74.
Can you help me to find a solution?
Thanks
First let me explain a bit about jquery selectors. This code of yours
var id_stream = $('#id_stream').attr('value');
selects all the items with the id of #id_stream, and returns the first value.
If you want to get the ID of the row clicked, then you should select the row first. But since you haven't shared the rest of your code, i can only assume the rest. There are several ways of doing so, and this is one of them.
1 ) Get the parent of $(this) >
2 ) Then get the first sibling of it
3 ) Finally find input and get val().
Or you can do it by Jquery's closest function. But as i said, first i need to see the rest of your code.
I have a bootstrap table in my react project. I want to get the index of row which I click on. I want to do something like this onclick = {this.handleClick} and in handleClick function I want to get the index of row. Is it possible to do it. Most of the solutions available shows everything using jquery and I don't want to use Jquery. I want to do it using just javascript only. This is my table
<Table className='flags-table' responsive hover>
<thead>
<tr>
<th> </th>
<th> Time In </th>
<th> Time Out </th>
<th> Type </th>
<th> Category </th>
</tr>
</thead>
<tbody>
{
FLAGS_LIST.map((x,i)=> (
<tr key={i}>
<td> <div className='red-box'></div> </td>
<td> {x.time_in} </td>
<td> {x.time_out} </td>
<td> {x.type} </td>
<td> {x.category} </td>
</tr>
))
}
</tbody>
</Table>
You can use code like this:
onclick = {this.handleClick.bind(this, i)};
and handleClick should declare like this:
var handleClick = function(i) {
console.log("key of row", i)
...
};
I have an exiting PHP/javascript application that generates a table with some rows and corresponding child rows(there can be many of them, all are retrived from DB at once), which are hidden by default. Child rows are shown after user clicks button placed in table row.
It looks like this(one parent, two children):
http://i.imgur.com/hul9fT9.png
It is generated like this from php:
for($i = 0; $i < count($shipArr); $i++)
{
echo '
<tr>
<td><span>'.$shipArr[$i]["orderNo"].'</span></td>
</tr>
<tr>
<td>
<table id="details">
;'
for($j = 0; $j < count($shipDetailsArr[$i]); $j++)
{
echo '
<tr>
<td>
<p>
<span>Order Number: </span><span>'.$shipDetailsArr[$i][$j]["lineNo"].'</span>
</p>
</td>
</tr>
';
}
echo '</table>;'
}
Can I use somehow objects $shipArr and $shipDetailsArr populated from db to create the same effect using datatables plugin? How can I achieve this?
Thanks for any help.
I dont't think there is a database plugin which can automatically generate a table. You should use something like a table generator. You can program it yourself in e.g. PHP.
If this is hard for you there are already classes which can do this. Two examples are:
http://www.dyn-web.com/php/table_class/example.php
https://github.com/naomik/htmlgen
Good luck!
I know this question is quite old, but I thought I'd chime in with some support considering another answer here linked to my project.
To solve this problem, I wrote htmlgen, mirrored on packagist. It makes HTML generation with PHP quite nice, if I do say so myself !
use function htmlgen\html as h;
use function htmlgen\map;
$beeData = [
'pop' => 'yup',
'candy' => 'sometimes',
'flowers' => 'so much',
'water' => 'not really',
'sand' => 'indifferent',
'donuts' => 'most definitely'
];
echo h('table',
h('thead',
h('tr',
h('td', 'item'),
h('td', 'do bees like it?')
)
),
h('tbody',
map($beeData, function($value, $key) { return
h('tr',
h('td', $key),
h('td', $value)
);
})
)
);
Output (whitespace not included in actual output)
<table>
<thead>
<tr>
<td>item</td>
<td>do bees like it?</td>
</tr>
</thead>
<tbody>
<tr>
<td>pop</td>
<td>yup</td>
</tr>
<tr>
<td>candy</td>
<td>sometimes</td>
</tr>
<tr>
<td>flowers</td>
<td>so much</td>
</tr>
<tr>
<td>water</td>
<td>not really</td>
</tr>
<tr>
<td>sand</td>
<td>indifferent</td>
</tr>
<tr>
<td>donuts</td>
<td>most definitely</td>
</tr>
</tbody>
</table>