Dynamische Daten Tabelle Paginierung und Sortierung ändern/dynamische Inhalte

http://www.datatables.net/releases/DataTables-1.9.3.zip

Ich versuche, verwenden Sie die oben genannten plugin. Ich nenne Funktion paging() bei onload und es funktioniert

<body id="dt_example" onload='paging()'>

Aber wenn ich neu laden der Tabelle innerHTML mit den gleichen Daten (statische Daten, die hatte ich in meiner Tabelle) auf eine Schaltfläche klicken Sie als (Beispiel ist die id von der Tabelle mytable)

<input type ='button' value='click To reload Table contents' onclick='remake()'/>

function remake() 
{
    var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
    ht = ht + '<tbody>';
    ht = ht + '<tr><td> shjhds</td><td></td></tr>';
    ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
    ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
    ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
    ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
    ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
    ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
    ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
    ht = ht + '</tbody>';

    $("#example").html(ht);
    paging();
 }

 function paging()
 {
     $('#example').dataTable();
 }

Nichts funktioniert nach dem dynamischen ändern der Inhalt einer Tabelle weder Sortier-noch Seitenzählung

datatables.net haben klar geführt, um zu verwenden $('#example').dataTable(); noch ich bin nicht immer es funktioniert, wenn ich Sie laden Inhalte dynamisch. Ich muss wissen, was ich falsch mache?

Optionale anzeigen (Mein Kompletter Code)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4
/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title>DataTables example</title>
        <style type="text/css" title="currentStyle">
            @import "css/demo_page.css";
            @import "css/demo_table.css";
        </style>
        <script type="text/javascript" language="javascript" src="js/jquery.js">
</script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js">
</script>

<script type="text/javascript" charset="utf-8">
function paging()
{
    $('#example').dataTable();
}

 function remake()
 {
    var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
    ht = ht + '<tr><td> shjhds</td><td></td></tr>';
    ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
    ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
    ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
    ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
    ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
    ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
    ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
    ht = ht + '</tbody>';
    $("#example").html(ht);
    paging();
    }
</script>
</head>

<body id="dt_example" onload='paging()'>
    <div id="container">
    <input type ='button' value='click To reload Table contents' onclick='remake()' />
            <div id="demo">
            <table cellpadding="0" cellspacing="0" border="5" class="display" id="example" width="100%">
                <thead>
                    <tr>
                        <th>dfsdd</th>
                        <th>Browser</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td> shjhds</td><td></td></tr>
                    <tr><td>dsdsd</td><td>xsax</td></tr>
                    <tr><td>dasdd</td><td>bdsffa</td></tr>
                    <tr><td>fsdfsd</td><td></td></tr>
                    <tr><td>kghfagh</td><td>xzxz</td></tr>
                    <tr><td></td><td>kghfagh</td></tr>
                    <tr><td>rgsg</td><td>bnfjf</td></tr>
                    <tr><td></td><td>fsdfs</td></tr>
                    <tr><td>dfsas</td><td>caadada</td></tr>
                </tbody>
            </table>
            </div>
            </div>
    </body>
</html>
  • können Sie zeigen, wie Sie rufen Sie $("#Beispiel").html-tun Sie es nennen onload onclick
  • Ich habe aktualisiert...ich vermisste tbody einmal aber nun Hinzugefügt, dass auch. Seinen allen mein code. Die css-und js-Klassen sind, wie es heruntergeladen und alle feinen arbeiten vor Neuladen der Tabelle Inhalt
InformationsquelleAutor Sami | 2012-09-12
  1. 2

    Einen schnellen Blick auf die API zeigt, dass Sie zerstören können,/remake der Tabelle oder zu manipulieren. Ich werde nur zeigen Ihnen die zerstören und remake-Methode. Aber Sie können javascript verwenden, um zu entfernen/deaktivieren Sie die Tabelle und fügen Sie neue Zeilen in der Tabelle, ohne die direkte Bearbeitung der DOM.

    var myTable;
function paging() {
    myTable = $('#example').dataTable();
}
function remake() {
myTable.fnDestroy();
var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
ht = ht + '<tr><td> shjhds</td><td></td></tr>';
ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
ht = ht + '</tbody>';
$("#example").html(ht);
paging();
}
    • Ja, es hat einige Arbeit, aber nicht erforderlich. Wie es nicht funktioniert, führen mich, um zu sehen, eine neue Nachricht "keine Daten in der Tabelle" aber ich habe doch gefüllt auch Daten, die ich erhalte den html-Code(text) der Kopf und der Körper die Zellen in alert 🙁
    • Nein ich habe einen Fehler gemacht. Ich bin es zu beheben. Hoffnung für das bessere Ergebnis. Dank für die freundlichen Antworten. Ich test und update
    • Tut mir Leid, aber ich verstehe nicht Ihre Frage.
    • Es war in Ordnung. Ich weiß einfach nicht, in der Regel upvote, es sei denn, es ist eine interessante Frage für mich.
    • Funktionierte perfekt. Dank
    InformationsquelleAutor Daniel Moses
  2. 0

    anstatt eine separate paging-Funktionen verwenden, die in Ihrem remake-Funktion

     function remake() {
    var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
    ht = ht + '<tr><td> shjhds</td><td></td></tr>';
    ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
    ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
    ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
    ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
    ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
    ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
    ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
    ht = ht + '</tbody>';
    $("#example").html(ht);
    $('#example').dataTable();
    }

    • Yup Versucht, aber keinen Unterschied
    InformationsquelleAutor COLD TOLD
  3. 0

    Ihr Leben leichter machen. Nur ein reload der gesamten Tabelle statt thead und tbody und verwenden Sie dann

    $('#demo').html(tableHtml); //Demo is id container of your table
$('#example').dataTable();//example is id of table

    Und tableHtml wie 

    vr tableHtml ='';
function remake() {
var ht = '<table id="example">';
ht = ht + '<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
ht = ht + '<tr><td> shjhds</td><td></td></tr>';
ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
ht = ht + '</tbody>';
ht = ht + '</table>';
tableHtml = ht;
$("#demo").html(tableHtml);
$('#example').dataTable();
}
    InformationsquelleAutor Sami
Schreibe einen Kommentar