var Jdata = [{"Store":480,"District":62,"Region":8,"Area":10,"City":"SPRINGFIELD","State":"TN","RiskClass":"RISK CLASS 2","AssignedDate":null,"AssignedBy":null,"AssignedConfig":null,"MatchCount":0,"MismatchCount":0,"ConfigModDate":null,"ConfigAppliedDate":null,"ConfigModBy":null},{"Store":590,"District":62,"Region":8,"Area":10,"City":"ASHLAND CITY","State":"TN","RiskClass":"RISK CLASS 0","AssignedDate":null,"AssignedBy":null,"AssignedConfig":null,"MatchCount":0,"MismatchCount":0,"ConfigModDate":null,"ConfigAppliedDate":null,"ConfigModBy":null}] var tableCatValue = $('#AjaxGrid').dataTable({ "bDestroy": true, "bFilter": true, "pageLength": 5, "bLengthChange": false, "data": Jdata, "columns": [ { data: null, render: function (data, type, row) { return '<div class=" messageName ">' + data.Store + '</div>'; }, width: '20%' }, { data: null, render: function (data, type, row) { return '<div class=" messageDesc">' + data.District + '</div>'; }, width: '53%' }, { data: null, render: function (data, type, row) { return '<div class=" messageName ct-ml-10">' + data.Region + '</div>'; }, width: '20%' }, { data: null, render: function (data, type, row) { return '<div class=" messageName ct-ml-10">' + data.Area + '</div>'; }, width: '20%' } ] });
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table id="AjaxGrid"> <thead> \t <tr> \t \t <th> \t \t \t <b>Group</b> \t \t </th> \t \t <th> \t \t \t <b>Region</b> \t \t </th> \t \t <th> \t \t \t <b>District</b> \t \t </th> \t \t <th> \t \t \t <b>Store</b> \t \t </th> \t </tr> </thead> <tbody> </tbody> </table>
Antwort
Problem1 Bindung: Erste Last jquery
und dann laden dataTable
.
Problem2: Sie haben nicht dataTable.css (To Arttabelle)
var Jdata = [{"Store":480,"District":62,"Region":8,"Area":10,"City":"SPRINGFIELD","State":"TN","RiskClass":"RISK CLASS 2","AssignedDate":null,"AssignedBy":null,"AssignedConfig":null,"MatchCount":0,"MismatchCount":0,"ConfigModDate":null,"ConfigAppliedDate":null,"ConfigModBy":null},{"Store":590,"District":62,"Region":8,"Area":10,"City":"ASHLAND CITY","State":"TN","RiskClass":"RISK CLASS 0","AssignedDate":null,"AssignedBy":null,"AssignedConfig":null,"MatchCount":0,"MismatchCount":0,"ConfigModDate":null,"ConfigAppliedDate":null,"ConfigModBy":null}];
var tableCatValue = $('#AjaxGrid').dataTable({
"bDestroy": true,
"bFilter": true,
"pageLength": 5,
"bLengthChange": false,
"data": Jdata,
"columns": [
{ data: null, render: function (data, type, row) {
return '<div class=" messageName ">' + data.Store + '</div>';
}, width: '20%'
},
{ data: null, render: function (data, type, row) {
return '<div class=" messageDesc">' + data.District + '</div>';
}, width: '53%'
},
{ data: null, render: function (data, type, row) {
return '<div class=" messageName ct-ml-10">' + data.Region + '</div>';
}, width: '20%'
},
{ data: null, render: function (data, type, row) {
return '<div class=" messageName ct-ml-10">' + data.Area + '</div>';
}, width: '20%'
}
]
});
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id="AjaxGrid">
<thead>
\t <tr>
\t \t <th>
\t \t \t <b>Group</b>
\t \t </th>
\t \t <th>
\t \t \t <b>Region</b>
\t \t </th>
\t \t <th>
\t \t \t <b>District</b>
\t \t </th>
\t \t <th>
\t \t \t <b>Store</b>
\t \t </th>
\t </tr>
</thead>
<tbody>
</tbody>
</table>
Danke perfekt ...! –
@vasanthnaidu Bitte akzeptieren Sie die Antwort, wenn es Ihr Problem gelöst –
Eine weitere Sache wie, wie die Leistung zu verbessern, weil wir 7000 Datensätze haben. –
- 1. dc.js - Datentabelle mit jquery Datentabelle Plugin
- 2. Spaltensuche mit Datentabelle - Jquery
- 3. Probleme mit jQuery Mit
- 4. jquery Datentabelle Scrollbar Positionierung
- 5. Jquery Datentabelle zu JSON
- 6. JQuery Ajax Datentabelle
- 7. Probleme mit DataTables und jQuery Dialogfeld
- 8. JQuery Datentabelle Paginierung Ajax
- 9. Hyperlinks in Jquery-Datentabelle
- 10. Sortierreihenfolge für Jquery-Datentabelle
- 11. Refresh jquery Datentabelle
- 12. jQuery Datentabelle benutzerdefinierte Sortierung
- 13. Probleme mit jQuery akzeptieren
- 14. Probleme mit JQuery
- 15. API-Probleme mit jQuery
- 16. Array Probleme mit JQuery
- 17. Probleme mit jQuery Slider
- 18. Verwendung von Repeater asp.net mit Datentabelle Jquery
- 19. Lazy Ladewerte in paginierten Datentabelle mit jquery
- 20. So korrigieren Sie Sortierreihenfolgen mit Jquery Datentabelle
- 21. Grails 3 GSP-Datentabelle mit jquery Ladefehler
- 22. jquery Datentabelle von den Einstellungen
- 23. Suchfeld über einer Jquery-Datentabelle
- 24. Jquery Datentabelle Anpassen der Seitenlänge
- 25. Eingang Rückkehr in jquery Datentabelle
- 26. Jquery Datentabelle Eingabefeld Textbox Spalte
- 27. Jquery Ajax Datentabelle neu laden
- 28. jQuery-Datentabelle - unerwartete vertikale Bildlaufleiste
- 29. JQuery Datentabelle Spaltenfilter Kopf ansprechbar
- 30. r Datentabelle Probleme mit dynamischen Namen in i
Was das spezifische Problem ist und die Frage enthalten? Bitte nehmen Sie sich ein paar Minuten Zeit, um [ask] zu lesen – charlietfl
Daten werden nicht in die Tabelle geladen. –
Und Sie haben wahrscheinlich Fehler in der Browser-Konsole geworfen ... haben Sie gesucht? – charlietfl