DataTables rendezés állapotának mentése és visszatöltése
2017-05-29T09:55:05+02:00
2017-05-30T08:39:52+02:00
2022-08-10T16:25:30+02:00
E.D.
Van egy dataTables-el generált táblázatom. Hogy tudom a rendezést menteni, majd visszatölteni?

Az automentés működik simán ("stateSave": true,), viszont ott csak egy időt lehet megadni, hogy meddig jegyezze meg a rendezést. Én viszont adatbázisba szeretném menteni és onnan visszatölteni.

Erre elvileg a "stateLoadCallback" és "stateSaveCallback" való. A mentés megy is, átmennek php-nak a mentendő adatok. a gond ott van, mikor azt visszaküldeném a "stateLoadCallback"-el.

Így próbáltam:

$(document).ready(function() { //... $.extend( true, $.fn.dataTable.defaults, { "fixedHeader": {header:true, headerOffset:34}, "lengthMenu": [[10, 15, 20, 25], [10, 15, 20, 25]], "autoWidth": true, "dom": '<"filter"f><"dtToolbar"B>rtilp', "select": 'single',//true "responsive": true, "stateSave": true, stateLoadCallback: function (settings, callback) { $.ajax({ "url": "/user_dtable_states/get_dtable_state/" + this.attr("id"), async: false, dataType: 'json', success: function (json) { callback(json); } }); }, "stateSaveCallback": function (settings, data) { $.ajax({ "url": "/user_dtable_states/save_dtable_state/" + this.attr("id"), "data": data, "dataType": "json", "type": "POST", "success": function () {} }); }, "processing": true, "serverSide": true, "language": { select: { rows: { _: "(%d sor kijelölve)", 0: "" } } } }); //... });
A '/user_dtable_states/get_dtable_state/" + this.attr("id")' url-ről például ezt próbálom visszaadni:

{"time":"1495713075727","start":"0","length":"10","order":[["8","asc"]],"search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"},"columns":[{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false&qu
Mutasd a teljes hozzászólást!
A prog.hu vágta le.

Rendben, csak egy tipp volt. Reggel nem volt előttem a kód, amivel hasonlót csináltam én is.

Most utánanézem: én úgy oldottam meg, hogy a szerver fele már egy JSON kódolt data-t küldök:

data: {config: JSON.stringify(data)},
ellenkező esetben a jQuery átalakítja az objektumot paraméterré, így mindent string-ként küld el ami problémát okoz a visszatöltésnél (integer / boolean értékek stringek lesznek).

Visszatöltésnél én megspóroltam egy hívást és alapból úgy csináltam meg a stateLoadCallback-et, hogy a szerver oldalon már berakom a javascriptbe a letárolt configot és azzal térek vissza.
Mutasd a teljes hozzászólást!

  • A prog.hu vágta le az json szöveg végét vagy már az adatbáziban sincs meg? Gondolok itt arra, hogy túl kicsi a mező és nem fér bele a teljes json string.
    Mutasd a teljes hozzászólást!
  • A prog.hu vágta le. Adatbázisba gyakorlatilag még nem is mentem. Előbb működésre akartam bírni, de már itt elakadtam. Gyakorlatilag amit a save függvény küld adatatot, azt próbálom visszaküldeni (php kódba beégetve). Szóval mentés még nincs, tuti minden adat visszamegy. Illetve obejektumként  kezelődik, mert alert-el kiírogattam belőle tesztként részeket. Tehát megérkezik, objektum is, csak valamiért a dataTables nem használja fel, holott elkezdi értelmezni, mivel ha hibás szerkezetű objektumot küldök vissza, akkor megakad és a táblázatot sem adja vissza.
    Mutasd a teljes hozzászólást!
  • A prog.hu vágta le.

    Rendben, csak egy tipp volt. Reggel nem volt előttem a kód, amivel hasonlót csináltam én is.

    Most utánanézem: én úgy oldottam meg, hogy a szerver fele már egy JSON kódolt data-t küldök:

    data: {config: JSON.stringify(data)},
    ellenkező esetben a jQuery átalakítja az objektumot paraméterré, így mindent string-ként küld el ami problémát okoz a visszatöltésnél (integer / boolean értékek stringek lesznek).

    Visszatöltésnél én megspóroltam egy hívást és alapból úgy csináltam meg a stateLoadCallback-et, hogy a szerver oldalon már berakom a javascriptbe a letárolt configot és azzal térek vissza.
    Mutasd a teljes hozzászólást!
  • Pedig már kezdtem feladni. Én mindig szerver oldalon kódoltam json-á. Gondoltam rá, hogy a számoknál és a logikai változóknál gond lehet, ki is próbáltam, hogy "kézileg" kiszedem a kódolt változatból ezeknél a macskakörmöket, de ezek szerint valami más eltérés is volt...

    Ezer köszönet, így már működik és pluszban jó, hogy nem a szervert fárasztom a kódolással is!
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd