Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Фильтр таблиц (https://javascript.ru/forum/dom-window/23010-filtr-tablic.html)

Georgy 08.11.2011 21:09
Фильтр таблиц
 
Здравствуйте.

Подскажите, пожалуйста, как сделать кнопку фильтрации таблицы?
То есть задача такова: php выгружается таблица из БД,и как сделать чтобы сверху была кнопка, при нажатии на которую можно выбрать название и таблица фильтруется (отображается только выбранное).

Подойдет любая подсказка - от примеров такого скрипта до хотя бы направления в котором стоит искать.

Спасибо.

ksa 08.11.2011 21:10
Цитата:
Сообщение от Georgy
Подойдет любая подсказка
Начинай делать тестовый пример... ;)

Georgy 08.11.2011 22:02
Цитата:
Сообщение от ksa (Сообщение 135291)
Начинай делать тестовый пример... ;)
спасибо) я как раз делаю.
Пока вот что нашел - использование Tabular Data, но он работает только в Internet Explorer. Есть какие-нибудь альтернативы?

ksa 09.11.2011 09:51
Цитата:
Сообщение от Georgy
Есть какие-нибудь альтернативы?
Таки выкинуть ПХП и перейти уже на zen. :lol: 

XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<html>
	<h1>Список работ</h1>
</html>
<hgroup width="100%" cellVAlign="top">
	<vgroup id="gTbl" width="90%" cellVAlign="top">
		<tableNavigator id="tnJob" tablePaneId="tpJob" align="right"/>
		<tablePane 
			id="tpJob" 
			tableName="wrk.Job" 
			valueColumn="ID"
			pageSize="50" 
			useSnapshot="true" 
			caption="Работы" 
			onselectrow='zenPage.Select(zenThis.getValue("ID"))'
			ondblclick='zenPage.Edit(zenThis.getValue("ID"));' 
			showValueInTooltip='true'
			OnCreateResultSet="CrtSQL"
		>
			<column 
				header="Id" 
				colName="ID" 
				hidden="true"
			/>
			<column 
				header="Название" 
				colName="Name" 
				filterType="text"
			/>
			<column 
				header="Исполнители" 
				colName="Member" 
				width="180px"
				filterType="query"
				filterQuery="Select Name From wrk.Member Order by Name"
			/>
			<column 
				header="Завершение" 
				colName="Brk" 
				width="120px"
			/>
			<column 
				header="Квартал" 
				colName="Kvartal" 
				width="130px"
			/>
			<column 
				header="Ok" 
				colName="Ok" 
				width="40px"
				filterType="enum"
				filterEnum="Да,Нет"
			/>
		</tablePane>
	</vgroup>
	<dataController id="cnJob" modelClass="wrk.Job"/>
	<spacer width="10px" />
	<vgroup id="gBtn" cellVAlign="top">
		<button 
			id="bExit" 
			caption="Выход" 
			onclick="zenPage.Go('wrk.ZEN.Menu.cls');" 
			controlClass="btn"
		/>
		<button 
			id="bLoad" 
			caption="Обновить" 
			onclick="zenPage.Load();" 
			controlClass="btn"
		/>
		<fieldSet legend="Работу">
			<button 
				id="bAdd" 
				caption="Добавить" 
				onclick="zenPage.Add();" 
				controlClass="btn"
			/>
			<button 
				id="bDel" 
				caption="Удалить" 
				onclick="zenPage.Del();" 
				controlClass="btn"
			/>
		</fieldSet>
	</vgroup>
</hgroup>
</page>
}

/// Построение запроса для отображения таблицы
Method CrtSQL(Output tSC As %Status, pInfo As %ZEN.Auxiliary.QueryInfo) As %ResultSet
{
	Set tRS = ""
	
	Set tSC = $$$OK
	Set tSELECT = "ID,Name,"
	Set tSELECT = tSELECT_"wrk.Job_AllMember(ID) as Member,"
	Set tSELECT = tSELECT_"dEnd as Brk,"
	Set tSELECT = tSELECT_"wrk.Plan_KvrToStr(Plan->ID) as Kvartal,"
	Set tSELECT = tSELECT_"wrk.Job_Ok(ID) as Ok"
	Set tFROM = "wrk.Job as a"
	Set tWHERE = ""
	Set tORDER = "dCreate desc,Member"
	// строим критерии отбора по фильтрам
	If $g(pInfo.filters("Name"))'="" {
		Set tWHERE = tWHERE_"Upper(Name) [ Upper('"_pInfo.filters("Name")_"') "
	}
	If $g(pInfo.filters("Member"))'="" {
		Set:tWHERE'="" tWHERE=tWHERE_" AND "
		Set tWHERE=tWHERE_"wrk.Job_AllMember(ID)['"_ pInfo.filters("Member")_"'"
	}
	If $g(pInfo.filters("Ok"))'="" {
		Set:tWHERE'="" tWHERE=tWHERE_" AND "
		s ok="<>"
		s:pInfo.filters("Ok")="Да" ok="="
		Set tWHERE=tWHERE_"wrk.Job_Ok(ID)"_ok_"'Да'"
	}
	Set sql = "SELECT " _ tSELECT _ " FROM " _ tFROM
	Set:tWHERE'="" sql = sql _ " WHERE " _tWHERE
	Set:tORDER'="" sql = sql _ " ORDER BY " _tORDER
	Set tRS = ##class(%ResultSet).%New()
	Set tSC = tRS.Prepare(sql)
	Set pInfo.queryText = sql
	Quit tRS
}

И ты уже имеешь вот такую страничку с табличкой



Там три фильтра. Помимо этого, если клацать на заголовки столбцов, будет выполняться сортировка таблицы по данным столбца, как по "возрастанию" так и по "убыванию".
Причём в сортировке будет учитываться типаж данных в колонке (строка, дата, время, число и п.р.)...

Georgy 10.11.2011 14:51
ksa,
спасибо большое! Сейчас начну разбираться.


nasqad,
тут же только сортировка, разве нет? Мне просто нужна именно кнопа автофильтра с возможностью выбрать строки.

ksa 10.11.2011 14:52
Цитата:
Сообщение от Georgy
Сейчас начну разбираться.
Велкам ту Cache DataBase! :lol:

Georgy 02.12.2011 20:57
Чтобы не плодить тем, задам еще 1 вопрос здесь=):

Вот есть таблица с 2 колонками, в 1 находятся кнопки, в другой другая таблица.
Вот внутренняя таблица состоит из: наименование и checkbox:

echo '<tr>
<td width = "400px">'.$DN.'</td>
<td width = "40px" align="middle"><input type="checkbox" onclick = "" id="'.$DC.'" name = "Det['.$i.']" value="on"/></td>
</tr>';


Мне нужно добавить кнопку, чтобы при нажатии отправился массив таких checkbox'ов в другой php файл. Проблема в том, что кнопка эта будет находиться в другой колонке внешней таблицы (то есть в 1 колонке внешней таблицы находится таблица с checkbox'ами, в другой-эта кнопка).
Как создать такую кнопку:) ? Возможно вопрос глупый, или я запутано объяснил, но я не знаю как это сделать.:)

Georgy 03.12.2011 14:12
Итак, вот что придумал, но почему-то не работает:
<p><a class="Link1 href="javascript:SendForm()">Ссылка</a></p>

И javascript:
function SendForm(){
	var checkboxes = document.getElementsByName('Det[]');
        var i = checkboxes.length;

	var SendData = document.createElement("form"); 
	SendData.action = "test.php"; 
	SendData.method = 'POST';
	SendData.id = 'SendID';
	var NewData = new Array(i);
	while(i--) {
	               if (checkboxes[i].checked == true) {
			    NewData[i] = document.createElement("input");
			    NewData[i].name = 'Det['+i+']';
			    NewData[i].type = 'hidden'; 
			    NewData[i].value = checkboxes[i].id; 
			    SendData.appendChild(NewData[i]);
			}
	              }
      document.getElementsByTagName('body')[0].appendChild(SendData);  
	SendData.submit();
	return false;	          
	}


Но данные не отправляются:(. В чем ошибка?

ksa 03.12.2011 16:46
Цитата:
Сообщение от Georgy
В чем ошибка?
Вероятно в неправильной хтмл-разметке...

Georgy 03.12.2011 17:28
Там стоит скобка=) просто она почему-то стерлась.
<p><a class="Link1" href="javascript:SendForm()">Ссылка</a></p>

Конечно, всё так выглядит.

ksa 03.12.2011 17:36
Georgy, я к тому, что если форма не отправляется как нужно - значит вёрстка негодится.

Georgy 03.12.2011 17:59
АААА! Я НАШЕЛ!
Оказывается, проблема была в этой строчке
NewData[i].name = 'Det['+i+']';

Вернее дело в квадратных скобках 'Det['+i+']'. Если их убрать, то все работает:victory: .

UJKJDF 05.08.2015 18:18
нужен поиск по таблице, чтобы при наборе в ячейке поиска таблица автоматом фильтровала все соответствующие позиции проверяя по всем ячейкам.

рони 05.08.2015 19:03
поиск в таблице и скрытие строк
 
UJKJDF,
если ненужно скрытие убрать строки 42 - 44
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style type='text/css'>
    body {
    font-family: Arial, Helvetica;
    font-size: 12px;
}
table {
    width: 500px;
}
tr {
    height: 20px;
}
.guide {
    text-decoration: underline;
    text-align: center;
}
tbody tr:nth-of-type(2n + 1) {
    color: #fff;
    background: #666;
}
tbody tr:nth-of-type(2n) {
    color: #666;
}
.hot {
    border: 1px solid #f00;
    background-color: #FFD480;
    color: #000000;
}
  </style>
<script>
$(function() {
    $("input#search").on("input", function() {
        var text = this.value.toLowerCase();
        $("tr:not(.guide) td").removeClass("hot").each(function(i, obj) {
            if ($(obj).text().toLowerCase().indexOf(text) > -1 && text) $(obj).addClass("hot")
        });
        $("tr:not(.guide)").show().filter(function() {
            return text && !$(".hot", this).length
        }).hide()
    })
});
</script>


</head>
<body>
  <input id="search" type="text"></input>

<table>
    <tr class="guide">
        <td>First Name</td>
        <td>Last Name</td>
        <td>City</td>
        <td>State</td>
    </tr>
    <tr>
        <td>Manix</td>
        <td>Bolton</td>
        <td>Merizo</td>
        <td>Michigan</td>
    </tr>
    <tr>
        <td>Azalia</td>
        <td>Gallegos</td>
        <td>Plainfield</td>
        <td>Michigan</td>
    </tr>
    <tr>
        <td>Michael</td>
        <td>Shaw</td>
        <td>Rawlins</td>
        <td>New Hampshire</td>
    </tr>
    <tr>
        <td>Matthew</td>
        <td>Parker</td>
        <td>Chino Hills</td>
        <td>Michigan</td>
    </tr>
</table>

</body>


</html>

UJKJDF 06.08.2015 16:06
Спасибо! попробую доработать,
При наборе текста в поиске надо чтоб находил все варианты
например
/Розетка СП Мира с заземл керам/
это в одной ячейке
набираю в поиске
роз(пробел)мира(пробел)сп(п обел)бел
в любой последовательности
надо чтобы находило.

рони 06.08.2015 16:58
UJKJDF,
RegExp и regexp.test - изучить и добавить вместо indexOf

UJKJDF 06.08.2015 22:10
<script>
$(function() {
$("input#search").on("input", function() {
var text = this.value.toLowerCase();
$("tr:not(.guide) td").removeClass("hot").each(function(i, obj) {
if ($(obj).text().toLowerCase().indexOf(text) > -1 && text) $(obj).addClass("hot")
});
$("tr:not(.guide)").show().filter(function() {
return text && !$(".hot", this).length
}).hide()
})
});
</script>

indexOf нашел
только в этом совсем не понимаю
разобрался только с toLowerCase
(подскажите новичку)

UJKJDF 07.08.2015 12:45
Сам не смогу.
скинь пожалуйста!
посмотрю что получилось.

UJKJDF 12.08.2015 17:29
Есть плагин???


Часовой пояс GMT +3, время: 13:43.