Jquery 如何将普通表转换为DataTables插件

Jquery 如何将普通表转换为DataTables插件,jquery,datatable,datatables,Jquery,Datatable,Datatables,您创建的行到处都是,请尝试以下方法: var jsonString = '{"data":{"2G":[{"amount":"9","detail":"35 MB 2G Data , Post 35 MB you will be charged at 4p\/10kb","validity":"1 Day","talktime":"0"},{"amount":"16","detail":"90 MB 2G Data, Post 90 MB you will be charged at 4p\/1

您创建的行到处都是,请尝试以下方法:

var jsonString = '{"data":{"2G":[{"amount":"9","detail":"35 MB 2G Data , Post 35 MB you will be charged at 4p\/10kb","validity":"1 Day","talktime":"0"},{"amount":"16","detail":"90 MB 2G Data, Post 90 MB you will be charged at 4p\/10kb","validity":"2 Days","talktime":"0"},{"amount":"28","detail":"160 MB 2G Data, Post 160 MB you will be charged at 4p\/10kb","validity":"4 Days","talktime":"0"},{"amount":"54","detail":"300 MB 2G Data, Post 300 MB you will be charged at 4p\/10kb","validity":"7 Days","talktime":"0"},{"amount":"78","detail":"310 MB 2G Data , Post 310 MB you will be charged at 4p\/10kb","validity":"10 Days","talktime":"0"},{"amount":"95","detail":"550 MB 2G Data, Post 550 MB you will be charged at 4p\/10kb","validity":"14 Days","talktime":"0"},{"amount":"125","detail":"700 MB 2G Data, Post 700 MB you will be charged at 4p\/10kb","validity":"18 Days","talktime":"0"},{"amount":"155","detail":"850 MB 2G Data, Post 850 MB you will be charged at 4p\/10kb","validity":"21 Days","talktime":"0"},{"amount":"179","detail":"1 GB 2G Data, Post 1 GB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"},{"amount":"198","detail":"Hero Recharge : Get 1.25 GB 2G Data assured benefit (upto 3 GB 2G Data with hero recharge)","validity":"28 Days","talktime":"0"},{"amount":"199","detail":"2 GB Unlimted 2G Data, Post 2 GB your speed will be reduced up to 40kbps","validity":"28 Days","talktime":"0"},{"amount":"249","detail":"3 GB Unlimted 2G Data, Post 3 GB your speed will be reduced up to 40kbps","validity":"28 Days","talktime":"0"},{"amount":"205","detail":"1 GB 2G Data Day + Extra 1 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"305","detail":"2 GB 2G Data Day + Extra 2 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"395","detail":"3 GB 2G Data Day + Extra 3 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"57","detail":"190 MB 2G Data, Post 190 MB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"},{"amount":"98","detail":"300 MB 2G Data, Post 300 MB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"}]},"resCode":"200","resText":"SUCCESS"}';

$(document).ready(function() {
   var amountlist = $('#amountlist tbody');
    var myData = $.parseJSON(jsonString);    
    //console.log(myData.data["2G"]);
    $.each(myData.data["2G"], function(i,dataElem) {
        $('<tr>').appendTo(amountlist);
        $('<td>' + dataElem.amount + '</td>').appendTo(amountlist);
        $('<td>' + dataElem.detail + '</td>').appendTo(amountlist);
        $('<td>' + dataElem.validity + '</td>').appendTo(amountlist);
        $('<td>' + dataElem.talktime + '</td>').appendTo(amountlist);
        $('</tr>').appendTo(amountlist);
    });
});

在中间工作。值得注意的是,这只适用于$。每个都是阻塞的。。。i、 e.数据表初始化在填充表后进行。这不是最好的方法,请检查此项。

您对datatable是什么意思?也许是DataTables jQuery的插件?你检查过这个吗:-。这里给出了如何配置不同数据表的示例?
$(document).ready(function() {
    var amountlist = $('#amountlist tbody');
    var myData = $.parseJSON(jsonString);
    $.each(myData.data["2G"], function(i, dataElem) {
        var tr = $('<tr></tr>');
        $('<td>' + dataElem.amount + '</td>').appendTo(tr);
        $('<td>' + dataElem.detail + '</td>').appendTo(tr);
        $('<td>' + dataElem.validity + '</td>').appendTo(tr);
        $('<td>' + dataElem.talktime + '</td>').appendTo(tr);
        tr.appendTo(amountlist);
    });
    $("#amountlist").find("table").DataTable();
});