Jak vzít data z tabulky? – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Ahoj lidi, používám DataTables knihovnu/framework. A potřeboval bych data z té již vygenerované tabulky s doselekcířádkl přes JS exportovat do CSV. Vůbec netuším jak by se to dalo.

1. PHP+SQL vyplní tabulku daty z databáze,
2. Uživatel na své straně klienta přes JS využije různé selekce a filtry.
3. Počet řádků tabulky je nyní po JS selekci třeba poloviční oproti původním PHP výpisu.
4. Jak teď vytvořit pole, které bude obsahovat všechna ID (první sloupec tabulky) výsledného výpisu k vygenerování CSV exportu? Potřebuji alespoň v tom javescriptu mít pole: array toCSV(3,9,15,45,25,...);
5. Dál si s tím polem asi udělám tlačítko pro předání toho pole přes POST zpět serveru nebo přes AJAX, to už nejak zmáknu, který po stisknutí tlačítka jen vrátí vygenerované CSV z toho vstupního pole toCSV. Jen neumím naplnit to pole tím prvním sloupcem. :-)
 

V kódu to vypadá takto:

<php? 
$vypisZaznamy= new Data();
$vypisZaznamy= $vypisZaznamy->vypisServery($sql="all");    
?>
<table id='table_id' class='display'>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Date of create</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        $vypisZaznamy
    </tbody>
</table>

Máte pro mě prosím někdo nějaký tip? Jak Ty id odselektované javascriptem získat? Případně asi můžu uělat něco jako toto: http://live.datatables.net/ akorát já mám v prvním sloupci ještě to ID záznamu.

Zalezi na tom, jakym zpusobem s tim pracujes.

1. Pokud data z php vycucas do js pole a to pak filtrujes a zobrazujes jako tabulku, tak misto zobrazeni tabulky to posles do csv (js kod, ktery ti array prepise do csv a nabidne ke stazeni, urcite se to da najit googlem, takovy js)
2. Pokud generujes pres php primo html kod tabulky, tak je reseni 1 trochu problem. Pak ti zbyvaji 2 moznosti. Ziskat data z tabulky javascriptem. Nebo kliknutim na odkaz Stahnout CSV si odesli filtry do php. Tam uz si to znova vyfiltrujes a vygenerujes mu csv, coz se dela programove lip a neni treba shanes js kod na csv. Navic muzes upravit ten kod, aby ti generoval xml, json, pdf (na pdf je treba knihovku, ale) nebo jine formaty :)
3. Moznost z 2. Ziskat data pomoci js z html tabulky.

// Principialne...

table = document.getElementByTagsName('TABLE')[0]
th_list = table.getElementByTagsName('TH');
td_list = table.getElementByTagsName('TD');

y = 0
pole[y] = []
k = 0 az td_list.length
{
x = 0 az th_list.length // vybere prvni radek
{
pole[y][x] = td_list[k].innerHTML // obsah bunky tabulky
}
y++; // zvysi cislo radku
pole[y] = [];
}

// Za predpokladu, ze tam nemas colspan

A mozna bys jako prvni tam mohl zapsat zahlavi.

#1 fix
Můžeš mi prosím sdělit, proč přepisuješ objekt $vypisZaznamy novým obsahem? Tohle rozhodně nedělej. 

<php? 
$data = new Data();
$zaznamy = $data->vypisServery($sql="all");header('Content-Type: application/json');echo json_encode($zaznamy);

#3 Kit
Hele, to je fixos. Clovek, ktery vlastni kod nikdy neposkladal. Takze ani ma rada mu k nicemu nebude, pac si to neumi dat dohromady.
Muzes mu sim te pridat i ten dalsi kod, jakym zpusobem se ten tvuj pouziva? Obavam se, ze na ajaxovy request by proste neprisel nebo script src :) Pripadne mu tam udelej upravy pro include

#4 peter
Kód, který jsem mu napsal, je kompletní. Jenom si ho z klienta zavolá ajaxem.

#1 fix
Konkrétní zkušenost nemám, ale Google na mě křičí toto https://datatables.net/extensions/select/examples/api/get.html. To nevyhovuje?

#6 gna
Tohle vypadá zajímavě, může se to hodit pro severless aplikace.

Ovšem tím events.prepend() to docela pohnojili.

Mám pocit, že se nechápe, že jsem to špatně vysvětlil, uvedu tedy ukázku s příkladem.

Mám toto: http://live.datatables.net/saxivebu/1/edit?…

1. Do instant search napíši "London"

2. Vrátí to dvě stránky 10+3 (celkem 13 nalezených  záznamů).

3. Pro těchto 13 záznamů potřebuji tlačítko "do CSV".

Dá se to nějak?

Jak si moje amatérská hlava přestavuje, že to může fungovat:

A) Nějak z klienta (prohlížeče) dostat těch 13 záznamů převést do JSON, ten pak poslat nějak přes tlačítko nad tabulkou AJAXem zpět do PHP, který ho zpracuje, vytvořit z něj CSV na straně PHP už zvládám.

B) Nějak z klienta (prohlížeče) dostat těch 13 záznamů uložit do pole, to pole použít jako vstup pro javascript funkci generujCSV($pole), přes tlačítko v tabulce.

C) Odchytit nějak to klíčové slovo, které vepíšu do instant search, a poslat ajaxem jen to klíčové slovo funkci, terá bude mít neco jako SELECT * FROM zaznamy WHERE jmeno LIKE "%$searchkw%" OR city LIKE "%$searchkw%", což bude sloužit jako data pro generátor CSV, mělo by to fungovat stejně, ale jak to klíčové slovo přes javascript z té tabulky dostat. Možná přes input.change event by se upravovalo URL tlačíka "do CSV" na /csvexport.php?kw=<kw>, myslíte, že je to reálné?

@peter

1. Data z PHP vycucám do pole je k ničemu. Vznikly by dvě verze:

A) 1:1 data v PHP v poli

B) Tabulka přes JS odfiltruje jen některé záznamy a o ty jde, ne o všechny v tom poli v A)

2.Ano generuji z PHP do HTML tabulky, a ta HTML tabulka se poté přes JS filtruje. Do CSV potřebuji přímo ten odfiltrovaný výstup, který je vytvořen někde na pozadí v datatables.

Získat data z tabulky přes javascript a ty data poslat přes AJAX do PHP právě chci, jen nevím jak to udělat. TO je ale asi nerealizovatelné, protože tabulka má paginaci (stránkování), fungovalo by to jen pro první stránku, prvních 10 záznamů, další by to ignorovalo. Proto mi přijde logické to udělat přímo na straně klieta, a nevracet to nijak zpět do PHP.

Odešli filtry do PHP nechápu jak myslíš. Filtry jsou součástí datatables.

3. Ten tvůj psudokod bych asi nějak zvládl dát dohromady aby fungoval, ale podle mě to bude brát právě jen první stránku té tabulky.

@Peter Jo, asi jsem máslo, ale AJAX jsem už dohromady jednou dal, jen jsem přes něj neposílal žádná pole, jen spustil PHP funkci na smazání záznamu nebo co to bylo.

@kit Jo, asi se tomu říká přetěžov\ání, dělám to rád, jen proto, že neznám důvod proč to nedělat, když si umím v hlavě vybavit posloupnost kodu, šetří to paměť ne? :-)

@gna Ne nevyhovuje, funguje to úplně jinak. Bavíme se o doselekci přes instant search, když budu chtít vyselektovat všechny Londýny z example a bude jich tisíc, tak budu muset tisíckát kliknout a všechny je označit. Má to poslat celý obsah tabulky po odfiltrování záznamů přes instant search. Resp vlastně by to asi nějak šlo, kdyby se namísto označování ty záznamy poslaly všechny (celá již odselektovaná tabulka).

@kit Kdepak, to přece nebude fungovat, to pošle zpět do PHP 1:1 to stejné, co PHP poslalo klientovi. Nemělo by to přece žádný význam.

Teoreticky jsem našel řešení: http://live.datatables.net/farozutu/1/edit?…

jsbin sice dole ukazuje 5 errors a 1 warning, ale funguje to. :-D

Má to ale jeden háček funguje to dost jinak, a to tak, že zprostředkovatl dat z databáze je zřejmě ten "ajax": "/ssp/objects.php", v rámci server-side, tomu jsem se chtěl vyhnout, protože potom je všechna logika jako i to vyhledávání apod. řešena přímo na serveru a celá ta logika je nakydaná v tom object.php, kde je obrovský moloch v podobě tisíci řádkového generátoru SQL dotazu. Tomu bych se tedy rád vyhnul.

#9 fix
Mně nešlo konkrétně o ten příklad se selected: true, ale obecně o tu funkci, které těch voleb podporuje více, třeba search: 'applied'...

To by vlastně fungovalo, ale špatně, pokud to dobře chápu, tak by to exportvovalo správně JEN v případě použití instant filteru. Já ale potřebuji aby to fungovalo vždy. Zkrátka nějakou API funkci, která vrátí všechny záznamy, které v tabulce v ten okamžik reálně jsou (ať už je nějaký filtr aktivní nebo není). Nacházím jen server-side řešení, ale client-side řešení přece musí existovat taky. Javascript umí určitě všechno.

Je to jednoduchý pokyn, ale realizace už je těžší vymyslet: Vezmi všechny aktuálně vypsané záznamy, a pošli je nějak XML/JSON přes AJAX (POST) generátoru /csv.php po kliknuttí na tlačítko "generuj CSV".

Chápu to tak, že jestli to datatables API neumí, tak s tím prostě nic nezmůžu a budu muset používat server-side zpracování.

Já ti nevím. Chápu to tak, že máš komplet data na klientu, filtrování i stránkování ti taky běží na klientu, tak nevidím v čem by měl být problém a co chceš řešit na serveru. Ale pokud to potřebuješ/chceš, tak holt vezmi obsah toho pole a pošli ho na server.

Zde nastává ten problém. Kde to poje vzít, když zdrojový kód přidaný na stránku je jen toto:

$(document).ready( function () {
  var table = $('#example').DataTable();
} );

Žádné pole v tom nevidím, to je ten problém a forkovat a překopávat knihovnu datatablesu není podle mě dobrá cesta.

Vůbec nechápu jak se k tomu poli dostat, to je celé jádro mého problému. V PHP udělám skoro cokoliv, sice amatérským způsobem, ale k výsledku se vždy doberu. Zatímco v případě JS vůbec nevím co mám dělat.

Juhů, konečně, přesně takhle je to TOP: https://jsfiddle.net/do2ntz79/

Díky, všem.

Možná nějaký javascript vepisuje tabulku. Osobně si myslím, že ji tvoří pomocí html elementů <table> <tr> a <td> (sám takto u jedné aplikace postupuji). Takže bych hledal javascriptem tabulku úplně stejně jako by byla vytvořena v html, akorát až po proběhnutí javascriptu který tabulku generuje.

hu

Jak jsi tam psal, ty zadas pozadavek a db ti vrati vysledky ala json, treba. Tak ti to muze vracet jako csv, ten samy php kod. Tak jsem to myslel. Prijde mi to jednodussi nez se drbat s javascriptem, kdyz uz mas vlastne vse hotove.
Pokud to ale nasledne jeste nejak filtrujes u uzivatele, i tak by bylo jednodussi poslat ty filtry php. Hlavne jde o to, ze php ma na csv funkce. 

$filters = $_POST['filters']; // samozrejme bys pridal kontroly proti hackingu a tak
$q = "SELECT ... WHERE ".$filters;
$data = ... fetch();

// https://stackoverflow.com/…array-to-csv
function array2csv($data, $delimiter = ',', $enclosure = '"', $escape_char = "\\")
{
    $f = fopen('php://memory', 'r+');
    foreach ($data as $item) {
        fputcsv($f, $item, $delimiter, $enclosure, $escape_char);
    }
    rewind($f);
    return stream_get_contents($f);
}

$list = array (
    array('aaa', 'bbb', 'ccc', 'dddd'),
    array('123', '456', '789'),
    array('"aaa"', '"bbb"')
);
var_dump(array2csv($list));

// ---NEBO---

 $f=fopen('php://memory','w');
 $header=array("asdf ","asdf","asd","Calasdflee","Start Time","End Time" );      
 fputcsv($f,$header);
 fputcsv($f,$header);
 fputcsv($f,$header); 
 fseek($f,0);
 header('content-type:text/csv'); 
 header('Content-Disposition: attachment; filename="' . $filename . '";');
 fpassthru($f);```

Tuhle jsem delal pro nejaky program, export csv, json, xml, html table, php array().
 

<?php
// --- class ExportData ---

class classExportData
{
private $vars;

function __construct()
	{
	$this->vars = array();
	$this->vars['name']    = 'classExportData';	// evid3 form name / what, template / htx file prefix
//	$this->config = array('debug' => true);
	}

private function isDebug()
	{
	return isset($this->config['debug']) && $this->config['debug']===true ? true : false;
	}

private function errorDebug($fn='')
	{
	return !$this->isDebug() ? '' : 'class'.$this->vars['name'].'::'.$fn.' ';
	}

private function errorAdd($fn='', $text='')
	{
	global $REPORT;
	$REPORT[] = $this->errorDebug($fn).$text;	//$app->errAdd('', $this->errorDebug($fn).$text)
	}

// function defination to convert array to xml
public function arrayToXml( &$data_xml, $data_list=array() )
	{
	foreach( $data_list as $key => $value )
		{
        	if (trim($key)=='')
	  		{continue;}
	 	if (is_array($value))
			{
			if (is_numeric($key))
				{
				$key = "item".$key; //dealing with <0/>..<n/> issues
				}
			$new_child = $data_xml->addChild($key);
			$this->arrayToXml($new_child, $value);
			}
		else	{
			if (is_numeric($key))// if the key is an integer, it needs text
				{
				$key = "key".$key;
				}
			$new_child = $data_xml->addChild("$key", htmlspecialchars("$value"));
			}
		}
	}

public function csvStrToCsv($input=array(), $delimiter = ',', $enclosure = '"')
	{
	if (!is_array($input))
		{return false;}
	foreach($input as $key=>$value)
		{
		if (is_array($value))
			{
			$input[$key] = $this->csvStrToCsv($value, $delimiter, $enclosure);
			}
		}
//	if (is_array($input))
//		{
//		}
        $fp = fopen('php://temp', 'r+');	// Open a memory "file" for read/write...
        fputcsv($fp, $input, $delimiter, $enclosure);
        rewind($fp);
        $data = fread($fp, 1048576);	// limit 1MB per csv line
        fclose($fp);
        return rtrim($data, "\n");
	}


public function format($data=array(), $format='')	// output format php array (/ json / xml / csv - not implement)
	{
	if ($format=='')
		{
		return $data;
		}
	elseif ($format=='csv')
		{
		$content = '';
		$valenc = "\"";
		$coldel = ";";
		$rowdel = "\n";
//		$rowdel = "<br>";	// for html/text
		foreach ($data as $row)
			{
			$content .= $this->csvStrToCsv($row, $coldel) . $rowdel;	// excel csv, del=; enc=" row=\n
			}
		return $content;
		}
	elseif ($format=='json')
		{
		return json_encode($data);
		}
	elseif ($format=='xml')
		{
		$xml = new SimpleXMLElement('<?xml version="1.0"?><data></data>');
		$this->arrayToXml($xml, $data);
		return $xml->asXML();
		}
	elseif ($format=='html')
		{
//var_dump($data); die();
		$pad_table = "\n";
		$pad_tbody = "\n  ";
		$pad_tr    = "\n    ";
		$pad_td    = "\n      ";
		$out = "$pad_table<table>$pad_tbody<tbody>";
		foreach ($data as $row)
			{
//var_dump(is_array($row), $row);
//die();
			if (!is_array($row))
				{
				$out .= "$pad_tr<tr>$pad_td<td>".((string) $row)."</td>$pad_tr</tr>";
				continue;
				}
			$out .= "$pad_tr<tr>";
			foreach ($row as $col)
				{
				$out .= "$pad_td<td>".((string) $col)."</td>";
				}
			$out .= "$pad_tr</tr>";
			}
		$out .= "$pad_tbody</tbody>$pad_table</table>";
		return $out;
		}
	}

}

peter, děkuji ti, ale já už třikrát psal, že to mám hotovo. Řešení je  dokonce označené. Snad sis s tím nedal zbytečně moc práce. Řešení, které mi posíláš (na straně PHP) jsemjsem zvládl dát do kupy už před pár lety. Podobně to mám už roky hotové. To ale v mém případě nešlo použít kvůli tomu, že v mém případě neexistuje
$_POST['filters']

Je to vyřešené, ale děkuji všem moc za váš čas a snahu mi pomoci.

$_POST['filters'], tam dosadis vlastni nazev promenne :)
Jj, cetl jsem, jen se mi zdalo, ze jsme se uplne nepochopili. Coz s mou slabou vysvetlovaci schopnosti neni nic noveho :)