Forum PHP.pl > [HTML][JavaScript][PHP]Stronicowanie tabeli JS, jQuery ?PHP?

elementator

6.03.2012, 12:22:13

zalogowałem się tutaj ponieważ szukam pomocy w pewnym projektem. Otóż mam do zrobienia tabele, która:

- ma powiedzmy 50 rekordów (np. 2x50)
- musi być postronicowana powiedzmy co 10 rekordów na stronie
- gdy klikniemy na przejście na następną stronę nie może się przeładowywać cała strona tylko ta tabela.
- i chyba najważniejsze, bazą danych jest plik z imieniem i nazwiskiem osób (tych 50) zapisany u mnie na kompie jako baza.txt

Niestety jestem komplentym zerem jeśli chodzi o programowanie. Dostałem ten projekt w ramach praktyk a jestem na poziomie i klasie c++, Pascal, Linux.

Proszę baaardzo o pomoc. Mówili mi coś o jQuery i wtyczkach, ale nie wiem zupełnie o co chodzi.

Pozdrawiam i proszę o ewentualna odpowiedź...

lobopol

6.03.2012, 21:20:32

http://www.jtable.org/ użyj piękne demo do ściągnięcia

elementator

13.03.2012, 22:24:56

Tabela zrobiona

.

Teraz potrzebuje zrobić clase php do zarządzania danymi w tabeli. ten obiekt klasy musi byc zasilony danymi do tabeli a potem metodą (funkcją) _toString wyprodukowac kod html

Mam nadzieję, że przywróce ten temat do życia.
Otóż:
1 Potrzebuję teraz zrobić klase w php'ie. Obiekt tej klasy musi być zasiolny danymi z bazy danych (pewnie mysql).
2. Następnie nimi zarządzać wybierając jakieś elementy tabeli.

Oto stworzona tabela (działa z wszystkimi plikami. jest postronicowana itp.

Kod

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
    <link rel="stylesheet" href="jq.css" type="text/css" media="print, projection, screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="print, projection, screen" />
    <script type="text/javascript" src="jquery-latest.js"></script>
    <script type="text/javascript" src="__jquery.tablesorter.js"></script>
    <script type="text/javascript" src="jquery.tablesorter.pager.js"></script>

    <script type="text/javascript" src="chili-1.8b.js"></script>
    <script type="text/javascript" src="docs.js"></script>
    <script type="text/javascript">
    $(function() {
        $("table")
            .tablesorter({widthFixed: true, widgets: ['zebra']})
            .tablesorterPager({container: $("#pager")});
    });
    </script>
</head>
<body>
<table cellspacing="1" class="tablesorter">
    <thead>
        <tr>

            <th>Imie</th>
            <th>Nazwisko</th>
            <th>płeć</th>


        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Imie</th>
            <th>Nazwisko</th>
            <th>Płeć</th>

        </tr>

    </tfoot>
    <tbody>
        <tr>
            <td>Zenon</td>
            <td>Kowalski</td>
            <td>Mężczyzna</td>

        </tr>
        <tr>
            <td>Jola</td>

            <td>Nowak</td>
            <td>Kobieta</td>


        </tr>
        <tr>
            <td>Zenon</td>
            <td>Kowalski</td>
            <td>Mężczyzna</td>

        </tr>
        <tr>
            <td>Jola</td>

            <td>Nowak</td>
            <td>Kobieta</td>


        </tr>
        <tr>
            <td>Zenon</td>
            <td>Kowalski</td>
            <td>Mężczyzna</td>

        </tr>
        <tr>
            <td>Jola</td>

            <td>Nowak</td>
            <td>Kobieta</td>


        </tr>
        <tr>
            <td>Zenon</td>
            <td>Kowalski</td>
            <td>Mężczyzna</td>

        </tr>
        <tr>
            <td>Jola</td>

            <td>Nowak</td>
            <td>Kobieta</td>


        </tr>
    <tr>
            <td>Zenon</td>
            <td>Kowalski</td>
            <td>Mężczyzna</td>

        </tr>
        <tr>
            <td>Jola</td>

            <td>Nowak</td>
            <td>Kobieta</td>


        </tr>
        <tr>
            <td>Zenon</td>
            <td>Kowalski</td>
            <td>Mężczyzna</td>

        </tr>
        <tr>
            <td>Jola</td>

            <td>Nowak</td>
            <td>Kobieta</td>


        </tr>
        <tr>
            <td>Zenon</td>
            <td>Kowalski</td>
            <td>Mężczyzna</td>

        </tr>
        <tr>
            <td>Jola</td>

            <td>Nowak</td>
            <td>Kobieta</td>


        </tr>
        <tr>
            <td>Zenon</td>
            <td>Kowalski</td>
            <td>Mężczyzna</td>

        </tr>
        <tr>
            <td>Jola</td>

            <td>Nowak</td>
            <td>Kobieta</td>


        </tr>
        <tr>
            <td>Zenon</td>
            <td>Kowalski</td>
            <td>Mężczyzna</td>

        </tr>
        <tr>
            <td>Jola</td>

            <td>Nowak</td>
            <td>Kobieta</td>


        </tr>
        <tr>
            <td>Zenon</td>
            <td>Kowalski</td>
            <td>Mężczyzna</td>

        </tr>
        <tr>
            <td>Jola</td>

            <td>Nowak</td>
            <td>Kobieta</td>


        </tr>
        <tr>
            <td>Zenon</td>
            <td>Kowalski</td>
            <td>Mężczyzna</td>

        </tr>
        <tr>
            <td>Jola</td>

            <td>Nowak</td>
            <td>Kobieta</td>


        </tr>
        <tr>
            <td>Zenon</td>
            <td>Kowalski</td>
            <td>Mężczyzna</td>

        </tr>
        <tr>
            <td>Jola</td>

            <td>Nowak</td>
            <td>Kobieta</td>


        </tr>
        <tr><td>Anna</td><td>Marek</td><td>Kobieta</td></tr>

    </tbody>

</table>
<div id="pager" class="pager">
    <form>
        <img src="first.png" class="first"/>
        <img src="prev.png" class="prev"/>
        <input type="text" class="pagedisplay"/>
        <img src="next.png" class="next"/>
        <img src="last.png" class="last"/>
        <select class="pagesize">
            <option selected="selected"  value="10">10</option>

            <option value="15">15</option>
            <option value="20">20</option>
            <option  value="25">25</option>
        </select>
    </form>
</div>

</div>
<script src="urchin.js" type="text/javascript"></script>

<script type="text/javascript">
_uacct = "UA-2189649-2";
urchinTracker();
</script>
</body>
</html>