Доброго времени суток! Мне надо выводить данные по фильтру в таблицу.То есть надо ввести например фильтр артикул и по фильтру получить данные в таблицу без перезагрузки страницы. HTML страницу я разработал, надо теперь как я понимаю сделать что-то на php и что-то на javascript. Помогите куда рыть, а лучше примером. Ниже код HTML. HTML: <table style="border: 1px solid #E22F87; width: 910px;" border="0"> <tbody> <tr> <td style="width: 30px;">№ акту</td> <td><input id="num_act" title="№ акту" maxlength="8" name="num_act" size="8" type="text" /></td> <td style="width: 30px;">Дата акту</td> <td style="width: 8px;"><input id="d_act" title="Дата акту" maxlength="8" name="d_act" size="8" type="text" /></td> <td style="width: 30px;">Статус</td> <td style="width: 30px;"><input id="status" title="Статус" maxlength="10" name="status" size="10" type="text" /></td> </tr> <tr> <td style="width: 30px;">Модель</td> <td style="width: 10px;"><input id="model" title="Модель" maxlength="8" name="model" size="8" type="text" /></td> <td style="width: 30px;">Артикул</td> <td style="width: 6px;"><input id="article" title="Артикул" maxlength="6" name="article" size="6" type="text" /></td> <td style="width: 30px;">Серійний номер<strong></strong></td> <td style="width: 30px;"><input id="snumber" title="Серійний номер" maxlength="8" name="snumber" size="8" type="text" /></td> </tr> </tbody> </table> <input name="bsearch" type="submit" value="Пошук" /> <table> <tr> <td> </td> </tr> <table> <table style="border: 1px solid #E22F87;" border="0"> <tbody> <tr style="background-color: #E22F87;"> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>№ акту</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Дата акту</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Дата накладної</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Модель</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Артикул</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Серійний номер</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Місце дефекту</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Дата дефекту</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Стан упаковки</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Статус</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Детальніше</strong></span></th> <?php foreach($form->data['OsmTech'] as $detail): $date_el_order = explode("-",$detail['dorder']); $date_el_defect = explode("-",$detail['ddefect']); $date_fe_order = $date_el_order[2].".". $date_el_order[1].".". $date_el_order[0]; $date_fe_defect = $date_el_defect[2].".". $date_el_defect[1].".". $date_el_defect[0]; ?> </tr> <tr> <td style="text-align: center;"><?php echo $detail['num_act_ogl']; ?></td> <td style="text-align: center;"><?php echo $date_fe_order; ?></td> <td style="text-align: center;"><?php echo $date_fe_order; ?></td> <td style="text-align: center;"><?php echo $detail['model']; ?></td> <td style="text-align: center;"><?php echo $detail['article']; ?></td> <td style="text-align: center;"><?php echo $detail['snumber']; ?></td> <td style="text-align: center;"><?php echo $detail['placedefect']; ?></td> <td style="text-align: center;"><?php echo $date_fe_defect; ?></td> <td style="text-align: center;"><?php echo $detail['conditionpack']; ?></td> <td style="text-align: center;"><?php echo $detail['status']; ?></td> <td style="text-align: center;"><?php echo $detail['linksag']; ?></td> </tr> <?php endforeach; ?> </tbody> </table>
данные полностью сразу все выводятся? или по страницам? я имею ввиду, то что у вас например 100 деталей, вы их выводите по 10 штук на странице или сразу все?
сразу все, то есть ввел фильтр, например, артикул, нажал кнопку "поиск", и без перегрузки получил результат в таблицу
ну скачала немного переделать таблицу добавив элемент THEAD и id как-то так: HTML: <table id="table" style="border: 1px solid #E22F87;" border="0"> <thead> <tr> <tr style="background-color: #E22F87;"> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>№ акту</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Дата акту</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Дата накладної</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Модель</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Артикул</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Серійний номер</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Місце дефекту</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Дата дефекту</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Стан упаковки</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Статус</strong></span></th> <th style="border: 1px solid #E22F87; width: 300px; text-align: center;"><span style="color: #ffffff;"><strong>Детальніше</strong></span></th> </tr> </thead> всё что в цикле foreach всё должно быть в TBODY ну то есть Код (Text): echo "<tbody>"; foreach( ) .... echo "</tbody>"; потом вы идёте на сайт мутулс и скачивайте mootools more можно весь можно только где TableSorter затем добавляете следуюш\ий код в js-файл или на странице как удобнее: [js] var t = new HtmlTable('table'); t.enableSort(); [/js] вот небольшой пример, того чего вам нужно: http://jsfiddle.net/gAV2y/1/ вот на сайте у них висит с полным описанием функций. http://mootools.net/docs/more/Interface/HtmlTable.Sort
надо чтоб например при вводе в поле артикул и при нажатии кнопки поиск выбирались только те артикулы, которые соответствую условию без перегрузки страницы в таблицу ниже. Запрос например select * from table where article = '123'; Хотел прикрепить скришот с сайта, чтоб наглядно показать, но не понял как тут это делать, могу Вам дать доступ, чтоб показать [/url]
ну в пхп сценарии и напишите, вывод потом в json заменить <input name="bsearch" type="submit" value="Пошук" /> на HTML: <input id="bsearch" name="bsearch" type="button" value="Пошук" /> данные придут такие [{"num_act_ogl":123,"model":"ads","article":"das"},{"num_act_ogl":111,"model":"ewq","article":"ter"},{"num_act_ogl":333,"model":"sdf","article":"oui"}] ну и далее. также добавить какой-нибудь див HTML: <div id="result"></div> для получения данных: [js] $('bsearch').addEvent('click', function(){ var data = ... //данные из input new Request.JSON(url: 'url_here', onSuccess: function(json){ var table = new Element('table', {'class': 'results'}); var tbody = new Element('tbody'); json.each(function(data){ var tr = new Element('tr'); Object.each(data, function(value, key){ var td = new Element('td', {'class': key}); td.set('text', value); td.inject(tr); }); tr.inject(tbody); }); tbody.inject(table); table.inject($('result')); }).post(data); }); [/js]