Hallo Community 
ich hab hier ein kleines Problem, nutzt Ajax Request um Daten aus einer mMySQl Datenbank zu holen und per Live Search zu durchsuchen. Allerdings ignoriert er dabei einige Dinge. CSS Styles, Funktionen vom Tabelsorter etc. ...
Darstellung sollte wie folgt aussehen:
Heraus kommt aber:
Den Tablesorter lade ich eigentlich mit $(".tablesorter").tablesorter('refresh'); ja neu bzw. refresh diesen, damit geht die Sortierung, die Pfeile dazu fehlen aber, genauso das Focus-Highlight oder das Spalte x y breit sein soll. Ist bestimmt was ganz simples aber ich she vor lauter Bäume gerade kein Licht :-(
ich hab hier ein kleines Problem, nutzt Ajax Request um Daten aus einer mMySQl Datenbank zu holen und per Live Search zu durchsuchen. Allerdings ignoriert er dabei einige Dinge. CSS Styles, Funktionen vom Tabelsorter etc. ...
Darstellung sollte wie folgt aussehen:
Heraus kommt aber:
Den Tablesorter lade ich eigentlich mit $(".tablesorter").tablesorter('refresh'); ja neu bzw. refresh diesen, damit geht die Sortierung, die Pfeile dazu fehlen aber, genauso das Focus-Highlight oder das Spalte x y breit sein soll. Ist bestimmt was ganz simples aber ich she vor lauter Bäume gerade kein Licht :-(
HTML:
<html lang="de">
<head>
<link href="../css/nexus.css" rel="stylesheet">
<link href="../css/theme.tablesorter.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/jquery.tablesorter.js"></script>
<script type="text/javascript" src="../script/widget-editable.js"></script>
<script id="js">
$(function()
{
$("#table")
.tablesorter({
theme : 'blue',
widgets: ['editable'],
widgetOptions: {
editable_columns : [0,1,2], // or "0-2" (v2.14.2); point to the columns to make editable (zero-based index)
editable_enterToAccept : true, // press enter to accept content, or click outside if false
editable_autoAccept : true, // accepts any changes made to the table cell automatically (v2.17.6)
editable_autoResort : false, // auto resort after the content has changed.
editable_validate : null, // return a valid string: function(text, original, columnIndex) { return text; }
editable_focused : function(txt, columnIndex, $element) {
// $element is the div, not the td
// to get the td, use $element.closest('td')
$element.addClass('focused');
},
editable_blur : function(txt, columnIndex, $element) {
// $element is the div, not the td
// to get the td, use $element.closest('td')
$element.removeClass('focused');
},
editable_selectAll : function(txt, columnIndex, $element) {
// note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
// only select everthing within the element when the content starts with the letter "B"
return /^b/i.test(txt) && columnIndex === 0;
},
editable_wrapContent : '<div>', // wrap all editable cell content... makes this widget work in IE, and with autocomplete
editable_trimContent : true, // trim content ( removes outer tabs & carriage returns )
editable_noEdit : 'no-edit', // class name of cell that is not editable
editable_editComplete : 'editComplete' // event fired after the table content has been edited
}
})
// config event variable new in v2.17.6
.children('tbody').on('editComplete', 'td', function(event, config) {
var $this = $(this),
newContent = $this.text(),
cellIndex = this.cellIndex, // there shouldn't be any colspans in the tbody
rowIndex = $this.closest('tr').attr('id'); // data-row-index stored in row id
// Do whatever you want here to indicate
// that the content was updated
$this.addClass( 'editable_updated' ); // green background + white text
setTimeout(function() {
$this.removeClass( 'editable_updated' );
}, 500);
/*
$.post("mysite.php", {
"row" : rowIndex,
"cell" : cellIndex,
"content" : newContent
});
*/
});
});
</script>
</head>
<body>
<div id="body-bg">
<?php
$current = "procos";
$ipage = 'header.php';
if (isset($_GET['page']))
{
$page = basename($_GET['page']);
$tpage = $page . '.php';
if (file_exists($tpage))
{
$ipage = $tpage;
}
}
include($ipage);
?>
<div id="content" class="bottom-border-shadow">
<div class="container background-white bottom-border">
<div class="row margin-vert-30-0">
<div class="col-md-12">
<div class="headline">
<h2 class="text-center">Procos Übersicht</h2>
<hr class="kreis">
</div>
</div>
<div class="col-md-12">
<table>
<tr>
<th style="width:345px;" class="left">
Such & Filterfunktion
</th>
</tr>
<tr>
<td class="left">
Motivname / Artikelnummer
</td>
</tr>
<tr>
<td>
<div class="input-group">
<span class="input-group-addon">Suche:</span>
<input type="text" name="search_text" id="search_text" placeholder="Suchbegriff eingeben" class="form-control" style="max-width:100%;" />
</div>
</td>
</tr>
</table>
<hr class="margin-bottom-5 margin-top-5">
</div>
<div class="col-md-12">
<form class="" method="post">
<div style="overflow-x:auto;" class="margin-bottom-5">
<div id="result"></tbody></table></div>
</div>
</form>
</div>
</div>
<hr class="margin-top-0">
<a href="#"><img class="myBack" src="../images/typo/top_arrow.png" alt="Seitenanfang"></a>
</div>
</div>
<div id="footer" class="background-grey">
<div class="container">
<div class="row">
<div id="footermenu" class="col-md-8">
<ul class="list-unstyled list-inline">
<li>
vom <?php echo date ('d.m.Y');?>
</li>
</ul>
</div>
<div id="copyright" class="col-md-4">
<p class="pull-right">© GmbH - <?php echo date ('Y');?></p>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function()
{
load_data();
function load_data(query)
{
$.ajax(
{
url:"procos_archiv_fetch.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#result').html(data);
$(".tablesorter").tablesorter('refresh');
}
});
}
$('#search_text').keyup(function()
{
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
</div>
</body>
</html>
PHP:
<?php
$mysqli = mysqli_connect("localhost", "root", "", "walzenliste"); $mysqli->set_charset("utf8");
$output = '';
if(isset($_POST["query"]))
{
$search = mysqli_real_escape_string($mysqli, $_POST["query"]);
$query = "SELECT * FROM db_procos WHERE lower(motivname) LIKE lower('%".$search."%') OR lower(artikelnummer) LIKE lower('%".$search."%')";
}
else
{
$query = "SELECT * FROM db_procos ORDER BY Motivname";
}
$result = mysqli_query($mysqli, $query);
if(mysqli_num_rows($result) > 0)
{
$output .= '
<table class="tablesorter options focus-highlight widget-zebra" data-sortlist="[[2,0]]">
<thead>
<tr>
<th style="">Motivname</th>
<th style="width:150px;">Artikel-Nr.</th>
<th style="width:90px;">Format</th>
<th class="sorter-false" style="width:36px;"><img src="../images/typo/anzahl.png" alt="Anzahl"></th>
<th style="width:90px;">Eingang</th>
<th style="width:90px;">Vorlage</th>
<th style="width:90px;">PDF</th>
<th style="width:90px;">Proof</th>
<th style="width:90px;">Freigabe</th>
<th style="width:90px;">Versand</th>
<th class="sorter-false" style="width:36px;"><img src="../images/typo/notizen.png" alt="Notizen"></th>
<th style="width:60px;">Wert</th>
<th style="width:80px;">Ergebnis</th>
<th class="sorter-false" style="width:36px;"><img src="../images/typo/edit.png" alt="Editieren"></th>
</tr>
</thead>
<tbody>';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["motivname"].'</td>
<td>'.$row["artikelnummer"].'</td>
<td>'.$row["format"].'</td>
<td>'.$row["farbanzahl"].'</td>
<td>'.$row["muster_eingang"].'</td>
<td>'.$row["vorlage_eingang"].'</td>
<td>'.$row["pdf"].'</td>
<td>'.$row["proof"].'</td>
<td>'.$row["freigabe"].'</td>
<td>'.$row["versand"].'</td>
<td>'.$row["notizen"].'</td>
<td>'.$row["wert"].'</td>
<td>'.$row["ergebnis"].'</td>
<td><cite title="Auftrag bearbeiten"><a href="procos_change.php?id='.$row["id"].'" class="fa-pencil"></a></cite></td>
</tr>';
}
echo $output;
}
else
{
echo 'Keine passenden Daten gefunden';
}
?>
