Live search balk toevoegen aan pagina

Door Ricardo B op 28-01-2022 11:38 gewijzigd op 28-01-2022 12:45

3.322 views

Hoi,

Ik ben bezig met een klanten / werk order systeem waarbij ik data kan vast leggen van klanten en werk historie inmiddels is er een hoop gelukt daarom de post aangepast om meer overzicht te krijgen (Scripts die ik niet meer gebruik + vragen daarover verwijderd).

Inmiddels toch werkend kunnen krijgen voor 90% alleen snap ik niet hoe dit werkt.

De zoek balk, paginering worden door javascript geregeld en worden in het script toegevoegd

              <table class="table table-hover table-condensed" id="example">
                <thead>
                  <tr>
                                                        <th>#</th>
                                                        <th>Naam</th>
                                                        <th>Email</th>
                                                        <th>Telefoon Nummer</th>
                                                        <th>Toestel</th>
                                                        <th>Imei</th>
                                                        <th>Registratie Datum</th>
                                                        <th>Acties</th>
                  </tr>
                </thead>
                <tbody>
                <?php $ret=mysqli_query($con,"select * from klantorder");
												$cnt=1;
												while($row=mysqli_fetch_array($ret))
												{
													$_SESSION['ids']=$row['id'];
												?>
                  <tr >
                    <td class="v-align-middle"><?php echo $cnt;?></td>
                    <td class="v-align-middle"><?php echo $row['naam'];?></td>
                    <td class="v-align-middle"><span class="muted"><?php echo $row['email'];?></span></td>
                    <td><span class="muted"><?php echo $row['telefoon'];?></span></td>
                    <td><span class="muted"><?php echo $row['toestel'];?></span></td>
                    <td><span class="muted"><?php echo $row['imei'];?></span></td>
                    <td class="v-align-middle"><?php echo $row['datum'];?>
                    <?php echo $row['cms'];?>
                    <?php echo $row['seo'];?>
                    <?php echo $row['smo'];?>
                    <?php echo $row['swd'];?>
                    <?php echo $row['dwd'];?>
                    <?php echo $row['fwd'];?>
                    <?php echo $row['dr'];?>
		    <?php echo $row['whs'];?>
                    <?php echo $row['wm'];?>
		    <?php echo $row['ed'];?>
		    <?php echo $row['wta'];?>
	            <?php echo $row['opi'];?>
		    <?php echo $row['ld'];?>
		    <?php echo $row['da'];?>
                    <?php echo $row['osc'];?>
                    <?php echo $row['nd'];?>
                    <?php echo $row['others'];?>
                    </td>
                      <td><a href="edit-user.php?id=<?php echo $row['id'];?>" class="btn btn-primary btn-xs btn-mini">Bekijk & Bewerk</a> 
                     <button type="button" class="btn btn-danger btn-xs btn-mini">Verwijder</button></td>
                  </tr>
                 <?php $cnt=$cnt+1; } ?>
                </tbody>
              </table>

En dan is het meer dit gedeelte wat ik niet snap:

                    <?php echo $row['cms'];?>
                    <?php echo $row['seo'];?>
                    <?php echo $row['smo'];?>
                    <?php echo $row['swd'];?>
                    <?php echo $row['dwd'];?>
                    <?php echo $row['fwd'];?>
                    <?php echo $row['dr'];?>
		    <?php echo $row['whs'];?>
                    <?php echo $row['wm'];?>
		    <?php echo $row['ed'];?>
		    <?php echo $row['wta'];?>
	            <?php echo $row['opi'];?>
		    <?php echo $row['ld'];?>
		    <?php echo $row['da'];?>
                    <?php echo $row['osc'];?>
                    <?php echo $row['nd'];?>
                    <?php echo $row['others'];?>

ik loop alleen nog tegen 2 problemen aan, de Id's worden niet op volgorde weergegeven

Dit werkt helaas niet

$ret=mysqli_query($con,"select * from klantorder ORDER BY id ASC");

en de verwijder knop die doet niets word wel gedfineerd door een class maar thats it (bestaand systeem aanpassen) de knop hoeft niet specifiek via een class te lopen als hij maar functioneel is :)

- Ariën -

28-01-2022 14:35 gewijzigd op 28-01-2022 14:38

Als de sortering niet klopt, klopt deze dan wel in de HTML-code?
Want het DataTable script zelf bepaald opnieuw de volgorde dan.

Heb je anders een voorbeeld in JSfiddle.net?

Over de sortering, kijk hier eens naar:
https://datatables.net/manual/data/#DOM
Zo kan je een eigen sortering afdwingen.

R Ricardo B

28-01-2022 14:39 gewijzigd op 28-01-2022 14:40

Het probleem is dat er best veel word toegevoegd aan het bestand kwa JS en CSS dat ik het overzicht wat kwijt ben om dit zo werkend te maken op JSfiddle word ook een gedoe denk ik hierbij mijn komplete bestand misschien dat het zo wat duidelijk word.


<?php
session_start();
include("dbconnection.php");
include("checklogin.php");
check_login();
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta charset="utf-8" />
<title>Admin | Manage Quotes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content="" name="description" />
<meta content="" name="author" />
<link href="../assets/plugins/bootstrap-select2/select2.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="../../assets/plugins/jquery-datatable/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
<link href="../assets/plugins/datatables-responsive/css/datatables.responsive.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="../assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="../assets/plugins/boostrapv3/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
<link href="../assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
<link href="../assets/css/animate.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css"/>
<link href="../assets/css/style.css" rel="stylesheet" type="text/css"/>
<link href="../assets/css/responsive.css" rel="stylesheet" type="text/css"/>
<link href="../assets/css/custom-icon-set.css" rel="stylesheet" type="text/css"/>
</head>
<body class="">
<?php include("header.php");?>
<div class="page-container row"> 
  
      <?php include("leftbar.php");?>
    
      <div class="clearfix"></div>
      <!-- END SIDEBAR MENU -->
    </div>
  </div>
  <div class="page-content">
    <!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
    <div id="portlet-config" class="modal hide">
      <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button"></button>
        <h3>Widget Settings</h3>
      </div>
      <div class="modal-body"> Widget settings form goes here </div>
    </div>
    <div class="clearfix"></div>
    <div class="content">
      <ul class="breadcrumb">
        <li>
          <p>YOU ARE HERE</p>
        </li>
        <li><a href="#" class="active">Quotes</a> </li>
      </ul>
      <div class="page-title"> <i class="icon-custom-left"></i>
        <h3>Manage User Quotes</h3>
      </div>
      <div class="row-fluid">
        <div class="span12">
          <div class="grid simple ">
            <div class="grid-title">
              <h4>Table <span class="semi-bold">Styles</span></h4>
              <div class="tools"> <a href="javascript:;" class="collapse"></a> <a href="#grid-config" data-toggle="modal" class="config"></a> <a href="javascript:;" class="reload"></a> <a href="javascript:;" class="remove"></a> </div>
            </div>
            <div class="grid-body ">
              <table class="table table-hover table-condensed" id="example">
                <thead>
                  <tr>
                                                        <th>#</th>
                                                        <th>Naam</th>
                                                        <th>Email</th>
                                                        <th>Telefoon Nummer</th>
                                                        <th>Toestel</th>
                                                        <th>Imei</th>
                                                        <th>Registratie Datum</th>
                                                        <th>Acties</th>
                  </tr>
                </thead>
                <tbody>
                <?php $ret=mysqli_query($con,"select * from klantorder order by 'id' desc");
				$cnt=1;
				while($row=mysqli_fetch_array($ret))
				{?>
                  <tr >
                    <td><?php echo $row['id'];?></td>
                    <td><?php echo $row['naam'];?></td>
                    <td>><?php echo $row['email'];?></td>
                    <td><?php echo $row['telefoon'];?></td>
                    <td><?php echo $row['toestel'];?></td>
                    <td><?php echo $row['imei'];?></td>
                    <td><?php echo $row['datum'];?>
                    </td>
                      <td><a href="edit-user.php?id=<?php echo $row['id'];?>" class="btn btn-primary btn-xs btn-mini">Bekijk & Bewerk</a> 
                     <button type="button" class="btn btn-danger btn-xs btn-mini">Verwijder</button></td>
                  </tr>
                 <?php $cnt=$cnt+1; } ?>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
     </div>
      
    <div class="addNewRow"></div>
  </div>
   
</div>

<script src="../assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="../assets/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/plugins/breakpoints.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js" type="text/javascript"></script>    
<script src="../assets/plugins/jquery-block-ui/jqueryblockui.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-numberAnimate/jquery.animateNumbers.js" type="text/javascript"></script>
<script src="../assets/plugins/bootstrap-select2/select2.min.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-datatable/js/jquery.dataTables.min.js" type="text/javascript" ></script>
<script src="../assets/plugins/jquery-datatable/extra/js/dataTables.tableTools.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="../assets/plugins/datatables-responsive/js/datatables.responsive.js"></script>
<script type="text/javascript" src="../assets/plugins/datatables-responsive/js/lodash.min.js"></script>
<script src="../assets/js/datatables.js" type="text/javascript"></script>
<script src="../assets/js/core.js" type="text/javascript"></script>
<script src="../assets/js/chat.js" type="text/javascript"></script>
<script src="../assets/js/demo.js" type="text/javascript"></script>
</body>
</html>

<script>

$(document).ready(function() {
    $('#id').DataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );

</script>

Dit stukje is een test stukje wat ook niet werkt :)


<script>

$(document).ready(function() {
    $('#id').DataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );

</script>

- Ariën -

28-01-2022 14:43

Als je wilt dat ik je vlot kan helpen, dan is JSfiddle toch wel het beste.
De output heb je in je browser staan.

De problemen zijn dus de sortering?
- Check je HTML-source of die daar klopt. Zo ja, dan moet je de juiste volgorde afdwingen met data-order="12345678"

En de knop?
- Wat gebeurt er als je er op klikt? Niks?
Hangt er een AJAX-request aan vast?

Ik heb geen tijd om een complete werkende versie in elkaar te flansen. Dus die bal leg ik graag jij jouw. :-)

R Ricardo B

28-01-2022 15:11 gewijzigd op 28-01-2022 15:16

JSfiddle begrijp ik niet direct, is het de bedoeling dat ik daar alle JS + CSS scripting onder elkaar erin zet ? en in de html sectie de php scripting plaats?

Yes zoals nu row 1 klopt de id wel van met de database alleen hoort deze onderaan de lijst te staan ik wil de id's op nummerieke volgorde hebben staan.

er komen ook steeds nieuwe invoeringen bij dus de id count zal oplopen

de bewerk knop werkt volledig, alleen de verwijder knop doet niets enkel de class is gedefineerd word doorverwezen naar een css file (welke ?) verder staat er niets in wel heb ik rond gekeken en inmiddels dit van de knop gemmaakt (oorspronkelijke staat heeft zowel in oude als huidige situatie niet gewerkt)


                                                          <form name="abc" action="" method="post">
                                                           <a href="edit-user.php?id=<?php echo $row['id'];?>" class="btn btn-primary btn-xs btn-mini">Bekijk & Bewerk</a> 
                                                           <button type="button" class="btn btn-danger btn-xs btn-mini">Verwijder</button>
                                                           </form>

[size=xsmall]Toevoeging op 28/01/2022 15:11:57:[/size]

JSfiddle begrijp ik niet direct, is het de bedoeling dat ik daar alle JS + CSS scripting onder elkaar erin zet ? en in de html sectie de php scripting plaats?

Yes zoals nu row 1 klopt de id wel van met de database alleen hoort deze onderaan de lijst te staan ik wil de id's op nummerieke volgorde hebben staan.

er komen ook steeds nieuwe invoeringen bij dus de id count zal oplopen

de bewerk knop werkt volledig, alleen de verwijder knop doet niets enkel de class is gedefineerd word doorverwezen naar een css file (welke ?) verder staat er niets in wel heb ik rond gekeken en inmiddels dit van de knop gemmaakt (oorspronkelijke staat heeft zowel in oude als huidige situatie niet gewerkt)

[code]
<form name="abc" action="" method="post">
<a href="edit-user.php?id=<?php echo $row['id'];?>" class="btn btn-primary btn-xs btn-mini">Bekijk & Bewerk</a>
<button type="button" class="btn btn-danger btn-xs btn-mini">Verwijder</button>
</form>
[code]

- Ariën -

28-01-2022 15:16 gewijzigd op 28-01-2022 15:18

Bij JSfiddle gaat het om de output. Het is geen PHP-editor.

HTML-output in het HTML-vakje, CSS in het CSS-vakje (zonder HTML), en Javascript in het JavaScript-vakje.
En externe libraries zoals een extern gehoste DataTable kan je links bij 'Resources' koppelen.

Over je sortering: Heb je al gekeken naar mijn link over data-order?
met de link is in de HTML gezien niks mis. Maar blijkbaar hangt er iets van een JavaScript aan? Misschien omdat de bewerk-functie bijvoorbeeld in een aparte overlay opent?

R Ricardo B

28-01-2022 15:36

Ik zat al te kijken bij de data order, wat dingen geprobeerd maar helaas nog geen resultaat.

ik heb een pb gestuurd met de link en gegevens om wat meer duidelijkheid te krijgen, met een ander javascript kreeg ik wel de juiste volgorde tot de zoek functie werd ingeladen en de ordering weer werd terug gegooit (door elkaar)

het word blijkbaar door java aangestuurd

- Ariën -

28-01-2022 15:47 gewijzigd op 28-01-2022 15:49

Sorry, ik ga helaas niet in op privé-berichten over 1-op-1 support. Dat staat ook in mijn profiel vermeld.
Het forum hier wordt door vrijwilligers aangedreven, en ik wil iedereen een kans bieden om mee te discussiëren.

Als je wat meer debugged, dan kan je met de ontvangen data daaruit hier wel wat meer bereiken, denk ik zo. Met de data-order kan je volgorde afdwingen, zegt de manual van DataTables.

R Ricardo B

28-01-2022 15:49

Zo is het ook niet bedoeld :) meer een link om mee te kijken en om hier verder te discussiëren :) en mochten er meer mensen willen mee kijken kan dat ook uiteraard.

of ik kan de link tijdelijk hier plaatsen, in die omgeving staat momenteel niets + er kan ook niets gedaan worden.

- Ariën -

28-01-2022 15:50 gewijzigd op 28-01-2022 15:50

Dat lijkt mij wel wenselijker... :-)
Bij voorkeur in JSfiddle of een andere ''zandbak', omdat het forum een kennisbank is, en eigen linkjes vaak snel verdwijnen waarbij een topic zijn waarde verliest.

R Ricardo B

28-01-2022 15:51 gewijzigd op 28-01-2022 18:35

Zeer begrijpelijk :) !

huidige script en ontwikkelingen enkel in het manage-quotes kopje

Yes ook begrijpelijk! Ik ben wel iemand dat als het opogelost is dat ik het antwoord hier uiteraard zal plaatsen, mensen die hier eventueel later problemen mee hebben kunnen dan eenvoudig aan een antwoord worden geholpen

Het probleem is dat het "systeem" best een chaos is omdat ik een bestaand ticket systeem aan het om knutselen ben en er minimaal 10/15 scripts worden toegevoegd in het script waar ik mee bezig ben waardoor het chaotisch is

Reageren

Inloggen om te reageren