Table filter

[sgouman]

Ik weet niet of het hier thuishoort.
Ik heb nu een simpele inventory management systeem gemaakt voor ons bedrijf. Hij is eigenlijk af behalve 1 ding.

Wat ik geen idee van heb hoe ik het zou moeten doen

Ik heb nu dit:


Nu staat hier geen regel in voor als het product erbij komt maar dat komt er dus wel dan staat er onder aantal ipv -1 gewoon 1

Nu heb ik deze mysql query om alles op te halen.
$sql = "SELECT * FROM mutaties, products WHERE product_id=products.id AND `aantal` < 0";

Ja ik haal nu alleen op van alles kleiner dan 1 bij aantal.

Maar wat ik wil is alles ophalen en dan aan de hand van de checkboxen in de afbeelding uitgaand en inkomend dat als je dus uitgaand selecteert dat je dan alleen de rows ziet waar het aantal een - value is. Bij inkomend zie je de values met de gewone waardes bij aantal. En bij beide aanklikken zie je alles.

Dit is de volledige code
*snip* Je mag relevante(!) code in je topic posten m.b.v. code tags

Weet iemand hoe dit moet.

[ Voor 6% gewijzigd door RobIII op 12-07-2019 09:44 ]

[RobIII]

sgouman schreef op donderdag 11 juli 2019 @ 21:48:
Weet iemand hoe dit moet.

Dit is nu niet heel veel meer dan een "Dit is mijn probleem, dit is mijn code, Kan iemand even...?". We zien hier graag (per onze Quickstart) wat je zélf al gezocht, gevonden en geprobeerd hebt.

Je zegt dat je nu dit hebt:
$sql = "SELECT * FROM mutaties, products WHERE product_id=products.id AND `aantal` < 0";
Wat let je om die WHERE clause dynamisch samen te stellen op basis van de geselecteerde checkboxen?

Pseudocode:

code:

query = "SELECT * FROM mutaties, products WHERE product_id=products.id"
if (uitgaand.checked && inkomend.checked)
  // NOP
else if (uitgaand.checked)
  query += " and `aantal` < 0"
else if (inkomend.checked)
  query += " and `aantal` >= 0"
end
query.execute()

Verder: Waar hoort mijn topic?
Ik zal je topic verplaatsen van Webdesign, Markup & Clientside Scripting naar Programming en "Bootstrap" uit de titel halen want dit heeft geen kont te maken met Bootstrap

[ Voor 29% gewijzigd door RobIII op 12-07-2019 09:58 ]

[Koozza]

Ik zou sowieso van de checkboxes een radio box maken. Als je deze nu een value -1 en 1 geeft kun je `aantal` verminigvuldigen met de value. Dan doe je dus:

code:

query = "SELECT * FROM mutaties, products WHERE product_id=product.id AND aantal * {CHECKBOXVALUE} >= 0;

(Pseudo code )

[RobIII]

Koozza schreef op vrijdag 12 juli 2019 @ 12:48:
Ik zou sowieso van de checkboxes een radio box maken. Als je deze nu een value -1 en 1 geeft kun je `aantal` verminigvuldigen met de value. Dan doe je dus:

code:

query = "SELECT * FROM mutaties, products WHERE product_id=product.id AND aantal * {CHECKBOXVALUE} >= 0;

(Pseudo code )

Dit soort "creatieve" oplossingen zijn leuk voor later (los van het feit dat je hier je sargeability overboord gooit en je dus potentieel een query produceert die voor geen meter performed).

[ Voor 7% gewijzigd door RobIII op 12-07-2019 14:16 ]

[Klaasvaak]

Als je alles ophaalt, kan je met checkboxen en CSS de rijen filteren.

code:

<style>
td {
 border: 1px solid black;
 padding: 1px 5px;
}
#merkA:not(:checked) ~ table tr[data~=merkA],
#merkB:not(:checked) ~ table tr[data~=merkB],
#merkC:not(:checked) ~ table tr[data~=merkC],
#model1:not(:checked) ~ table tr[data~=model1],
#model2:not(:checked) ~ table tr[data~=model2],
#modelX:not(:checked) ~ table tr[data~=modelX],
#modelY:not(:checked) ~ table tr[data~=modelY],
#inkomend:not(:checked) ~ table tr[data~=inkomend],
#uitgaand:not(:checked) ~ table tr[data~=uitgaand] {
 visibility: collapse;
}
</style>

merk A<input type="checkbox" id="merkA" checked>
merk B<input type="checkbox" id="merkB" checked>
merk C<input type="checkbox" id="merkC" checked>
<hr>
model 1<input type="checkbox" id="model1" checked>
model 2<input type="checkbox" id="model2" checked>
model X<input type="checkbox" id="modelX" checked>
model Y<input type="checkbox" id="modelY" checked>
<hr>
inkomend<input type="checkbox" id="inkomend" checked>
uitgaand<input type="checkbox" id="uitgaand" checked>
<hr>
<table>
<tr data="merkA inkomend model1"><td>merk A</td><td>model 1</td><td>3</td></tr>
<tr data="merkA uitgaand model2"><td>merk A</td><td>model 2</td><td>-1</td></tr>
<tr data="merkB uitgaand modelX"><td>merk B</td><td>model X</td><td>-2</td></tr>
<tr data="merkC inkomend modelY"><td>merk C</td><td>model Y</td><td>1</td></tr>
</table>

[farlane]

RobIII schreef op vrijdag 12 juli 2019 @ 14:14:
[...]

.. los van het feit dat je hier je sargeability overboord gooit...

Dat geloof ik niet. De query compiler/optimizer kan toch hoop ik een 1*[column] /-1* [column] redelijk optimaliseren........

[RobIII]

farlane schreef op zaterdag 13 juli 2019 @ 15:51:
[...]

Dat geloof ik niet. De query compiler/optimizer kan toch hoop ik een 1*[column] /-1* [column] redelijk optimaliseren........

Het gaat hier om MySQL he? Maar goed, voordeel van de twijfel; dit specifieke geval wellicht nog wel, maar je zit hier wel op dun ijs natuurlijk. Het is dat ik even niks bij de hand heb, anders had ik 't even getest.

[ Voor 8% gewijzigd door RobIII op 13-07-2019 16:08 ]

[Merethil]

Klaasvaak schreef op vrijdag 12 juli 2019 @ 23:17:
Als je alles ophaalt, kan je met checkboxen en CSS de rijen filteren.

code:

<style>
td {
 border: 1px solid black;
 padding: 1px 5px;
}
#merkA:not(:checked) ~ table tr[data~=merkA],
#merkB:not(:checked) ~ table tr[data~=merkB],
#merkC:not(:checked) ~ table tr[data~=merkC],
#model1:not(:checked) ~ table tr[data~=model1],
#model2:not(:checked) ~ table tr[data~=model2],
#modelX:not(:checked) ~ table tr[data~=modelX],
#modelY:not(:checked) ~ table tr[data~=modelY],
#inkomend:not(:checked) ~ table tr[data~=inkomend],
#uitgaand:not(:checked) ~ table tr[data~=uitgaand] {
 visibility: collapse;
}
</style>

merk A<input type="checkbox" id="merkA" checked>
merk B<input type="checkbox" id="merkB" checked>
merk C<input type="checkbox" id="merkC" checked>
<hr>
model 1<input type="checkbox" id="model1" checked>
model 2<input type="checkbox" id="model2" checked>
model X<input type="checkbox" id="modelX" checked>
model Y<input type="checkbox" id="modelY" checked>
<hr>
inkomend<input type="checkbox" id="inkomend" checked>
uitgaand<input type="checkbox" id="uitgaand" checked>
<hr>
<table>
<tr data="merkA inkomend model1"><td>merk A</td><td>model 1</td><td>3</td></tr>
<tr data="merkA uitgaand model2"><td>merk A</td><td>model 2</td><td>-1</td></tr>
<tr data="merkB uitgaand modelX"><td>merk B</td><td>model X</td><td>-2</td></tr>
<tr data="merkC inkomend modelY"><td>merk C</td><td>model Y</td><td>1</td></tr>
</table>

Dat is natuurlijk erg leuk bij een paar honderd rijen maar als je een flinke tabel aan data hebt dan is het zonde om het zo te doen, want een database kan een stuk beter (vooral sneller en efficiënter) filteren, sorteren etc. dan CSS of b.v. JavaScript kan.

[Ed Vertijsment]

Daarmee trek je tevens de verantwoordelijkheid van welke informatie getoond wordt naar de opmaak code. Is ook nog eens zeer kwetsbaar om stuk te gaan.

Liever niet

[Matis]

Ikzelf gebruikte daarvoor altijd DataTables en dan in het bijzonder icm Ajax data source.

Op die manier bleef ik schaalbaar en met behulp van de nodige hooks en (eigen) filters kon ik altijd bouwen / filteren wat ik wilde.

[YakuzA]

Merethil schreef op zaterdag 13 juli 2019 @ 17:30:
[...]


Dat is natuurlijk erg leuk bij een paar honderd rijen maar als je een flinke tabel aan data hebt dan is het zonde om het zo te doen, want een database kan een stuk beter (vooral sneller en efficiënter) filteren, sorteren etc. dan CSS of b.v. JavaScript kan.

Dat kan, totdat je x gebruikers hebt die een beetje zitten te spelen met de filter en sorteer knoppen en zo je website breken omdat voor elke klik alles serverside opnieuw uit de database gehaald wordt en op de lijn wordt gezet.

[Merethil]

YakuzA schreef op zondag 14 juli 2019 @ 21:17:
[...]

Dat kan, totdat je x gebruikers hebt die een beetje zitten te spelen met de filter en sorteer knoppen en zo je website breken omdat voor elke klik alles serverside opnieuw uit de database gehaald wordt en op de lijn wordt gezet.

Dan heb je echt wel even een paar foute keuzes gemaakt voordat het zover komt. Een beetje queryen op een database en dat spul teruggeven in een view kan je met elke taal efficiënt doen, zeker met de hardware hedentendage.
Denk je dat b.v. de pricewatch van Tweakers ook alles clientside loopt te filteren?

[Groax]

Matis schreef op zondag 14 juli 2019 @ 11:26:
Ikzelf gebruikte daarvoor altijd DataTables en dan in het bijzonder icm Ajax data source.

Op die manier bleef ik schaalbaar en met behulp van de nodige hooks en (eigen) filters kon ik altijd bouwen / filteren wat ik wilde.

Dit is inderdaad een mooie oplossing! ik gebruik dit voor al mijn tables die ook maar een beetje interactie hebben met de gebruiker.

Hier een begin stukje code van een filter in Datatable.

HTML:

<div id="dropdown">                     
      <h5><strong>Naam:</strong></h5><div id="type"></div>
 </div>

JavaScript:

$('.table').DataTable({
                initComplete: function () {
                // Welke row die door moet lopen om zijn opties te vullen.
                    this.api().columns([1]).every(function () {
                        var column = this;
                        var select = $('<select class="input-group"><option value="">Show All</option></select>')
                            .appendTo($('#dropdown #type').empty())
                            .on('change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });

                        column.data().unique().sort().each(function (d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>')
                        });
                    });
                }
            });