2016-09-14 6 views
0

次の例では、AjaxコールからXML応答を取得し、表に追加しています。Datatablesに対するJSONの応答?

$("#ajaxform5").submit(function(e) { 
    var formURL = $(this).attr("action"); 
    var request = $.ajax({ 
     url : formURL, 
     type: "GET", 
     contentType : "application/xml", 
     headers: { 
      "Type" : "events" 
     }, 
     success: function(xml){ 
      $(xml).find('event').each(function(){ 
       var $event = $(this); 
       var id = $event.find("id").text(); 
       var level = $event.find("level").text(); 
       var name = $event.find("name").text(); 
       var attributes01 = $event.find("attributes").children("entry").eq(0).children("string").eq(0).text(); 
       var attributes02 = $event.find("attributes").children("entry").eq(0).children("string").eq(1).text(); 
       var attributes11 = $event.find("attributes").children("entry").eq(1).children("string").eq(0).text(); 
       var attributes12 = $event.find("attributes").children("entry").eq(1).children("string").eq(1).text(); 
       var attributes21 = $event.find("attributes").children("entry").eq(2).children("string").eq(0).text(); 
       var attributes22 = $event.find("attributes").children("entry").eq(2).children("string").eq(1).text(); 
       var attributes31 = $event.find("attributes").children("entry").eq(3).children("string").eq(0).text(); 
       var attributes32 = $event.find("attributes").children("entry").eq(3).children("string").eq(1).text(); 
       var attributes41 = $event.find("attributes").children("entry").eq(4).children("string").eq(0).text(); 
       var attributes42 = $event.find("attributes").children("entry").eq(4).children("string").eq(1).text(); 
       var userId = $event.find("userId").text(); 
       var ipaddress = $event.find("ipaddress").text(); 
       var outcome = $event.find("outcome").text(); 
       var html = '<tr><td>' + id + '</td><td>' + level + '</td><td>' + name + '</td><td>' + 
        '<div><span class="title">' + attributes01 + '</span> <span>' + attributes02 + '</span></div>' + 
        '<div><span class="title">' + attributes11 + '</span> <span>' + attributes12 + '</span></div>' + 
        '<div><span class="title">' + attributes21 + '</span> <span>' + attributes22 + '</span></div>' + 
        '<div><span class="title">' + attributes31 + '</span> <span>' + attributes32 + '</span></div>' + 
        '<div><span class="title">' + attributes41 + '</span> <span>' + attributes42 + '</span></div>' + 
        '</td><td>' + userId + '</td><td>' + ipaddress + '</td><td>' + outcome + '</td></tr>'; 
       $('#eventTable').append(html); 
      }); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      alert(textStatus); 
     } 
    }); 
}); 

ここではDatatablesを使用します。だから私はxml2json(abdmob/x2js)とJSON応答XMLを変換し、私は以下のJSON応答を得た。

JSONレスポンス。

{ 
    "list" : { 
     "event" : [{ 
       "dateTime" : "1473858435162", 
       "nanoTime" : "438326047248251", 
       "id" : "15680", 
       "eventTime" : { 
        "time" : "1473851193487", 
        "timezone" : "Asia/Istanbul" 
       }, 
       "level" : "INFORMATION", 
       "name" : "Get message content", 
       "attributes" : { 
        "entry" : [{ 
          "string" : ["metaDataIds", "6"] 
         }, { 
          "string" : ["messageId", "2765"] 
         }, { 
          "string" : ["channel", "Channel[id=44ab0667-d42c-496c-bca2-2bd7eecd6dc9,name=API jQuery Direct]"] 
         } 
        ], 
        "_class" : "linked-hash-map" 
       }, 
       "outcome" : "SUCCESS", 
       "userId" : "1", 
       "ipAddress" : "127.0.0.1", 
       "serverId" : "f85e48e2-32b3-429f-bee5-31630d8143a2" 
      }, { 
       "dateTime" : "1473858435167", 
       "nanoTime" : "438326052034149", 
       "id" : "15679", 
       "eventTime" : { 
        "time" : "1473851191973", 
        "timezone" : "Asia/Istanbul" 
       }, 
       "level" : "INFORMATION", 
       "name" : "Get messages by page limit", 
       "attributes" : { 
        "entry" : [{ 
          "string" : ["filter", "MessageFilter[maxMessageId=2765,minMessageId=<null>,originalIdUpper=<null>,originalIdLower=<null>,importIdUpper=<null>,importIdLower=<null>,startDate=<null>,endDate=<null>,textSearch=<null>,textSearchRegex=<null>,statuses=<null>,includedMetaDataIds=[6],excludedMetaDataIds=<null>,serverId=<null>,contentSearch=[],metaDataSearch=<null>,textSearchMetaDataColumns=<null>,sendAttemptsLower=<null>,sendAttemptsUpper=<null>,attachment=false,error=false]"] 
         }, { 
          "string" : ["includeContent", "false"] 
         }, { 
          "string" : ["offset", "0"] 
         }, { 
          "string" : ["limit", "21"] 
         }, { 
          "string" : ["channel", "Channel[id=44ab0667-d42c-496c-bca2-2bd7eecd6dc9,name=API jQuery Direct]"] 
         } 
        ], 
        "_class" : "linked-hash-map" 
       }, 
       "outcome" : "SUCCESS", 
       "userId" : "1", 
       "ipAddress" : "127.0.0.1", 
       "serverId" : "f85e48e2-32b3-429f-bee5-31630d8143a2" 
      } 
     ] 
    } 
} 


だから私の最初の質問は、DataTableのために有効な、このJSONレスポンスのですか?
有効な場合、最初の例のように、行と列にオブジェクトや配列をどのようにアドレス指定できますか?

DatatablesにJSON応答を挿入しようとしましたが、できませんでした。あなたは写真の中の結果を見ることができます。 response added to rows char by char

私は説明のために以下のコードを与えましたが、私はデータを挿入するためにどんなに垂らしたのかわかりません。
また、配列を読み取るためにcolumns.dataオプションを試しましたが、もう一度失敗しました。

$("#ajaxform6").submit(function(e) { 
    var formURL = $(this).attr("action"); 
    var request = $.ajax({ 
     url : formURL, 
     type: "GET", 
     contentType : "application/xml", 
     headers: { 
      "Type" : "events" 
     }, 
     success: function(data, textStatus, jqXHR) { 
      var x2js = new X2JS(); 
      var bXML = jqXHR.responseText; 
      var jsonObj = x2js.xml_str2json(bXML); 
      var json = JSON.stringify(jsonObj); 
      console.log(json); 
      $('#table_id').DataTable({ 
       data: json, 
       bSort: false, 
      }); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      alert(textStatus); 
     } 
    }); 
}); 

答えて

1

あなたのjsonデータは応答として有効であり、datatableに解析することができます。文字列化のための

var jsdata = { 
 
\t \t "list" : { 
 
\t \t \t "event" : [ 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t "dateTime" : "1473858435162", 
 
\t \t \t \t \t \t "nanoTime" : "438326047248251", 
 
\t \t \t \t \t \t "id" : "15680", 
 
\t \t \t \t \t \t "eventTime" : { 
 
\t \t \t \t \t \t \t "time" : "1473851193487", 
 
\t \t \t \t \t \t \t "timezone" : "Asia/Istanbul" 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t "level" : "INFORMATION", 
 
\t \t \t \t \t \t "name" : "Get message content", 
 
\t \t \t \t \t \t "attributes" : { 
 
\t \t \t \t \t \t \t "entry" : [ 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ "metaDataIds", "6" ] 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ "messageId", "2765" ] 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ "channel", 
 
\t \t \t \t \t \t \t \t \t \t \t \t "Channel[id=44ab0667-d42c-496c-bca2-2bd7eecd6dc9,name=API jQuery Direct]" ] 
 
\t \t \t \t \t \t \t \t \t } ], 
 
\t \t \t \t \t \t \t "_class" : "linked-hash-map" 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t "outcome" : "SUCCESS", 
 
\t \t \t \t \t \t "userId" : "1", 
 
\t \t \t \t \t \t "ipAddress" : "127.0.0.1", 
 
\t \t \t \t \t \t "serverId" : "f85e48e2-32b3-429f-bee5-31630d8143a2" 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t "dateTime" : "1473858435167", 
 
\t \t \t \t \t \t "nanoTime" : "438326052034149", 
 
\t \t \t \t \t \t "id" : "15679", 
 
\t \t \t \t \t \t "eventTime" : { 
 
\t \t \t \t \t \t \t "time" : "1473851191973", 
 
\t \t \t \t \t \t \t "timezone" : "Asia/Istanbul" 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t "level" : "INFORMATION", 
 
\t \t \t \t \t \t "name" : "Get messages by page limit", 
 
\t \t \t \t \t \t "attributes" : { 
 
\t \t \t \t \t \t \t "entry" : [ 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ 
 
\t \t \t \t \t \t \t \t \t \t \t \t "filter", 
 
\t \t \t \t \t \t \t \t \t \t \t \t "MessageFilter[maxMessageId=2765,minMessageId=<null>,originalIdUpper=<null>,originalIdLower=<null>,importIdUpper=<null>,importIdLower=<null>,startDate=<null>,endDate=<null>,textSearch=<null>,textSearchRegex=<null>,statuses=<null>,includedMetaDataIds=[6],excludedMetaDataIds=<null>,serverId=<null>,contentSearch=[],metaDataSearch=<null>,textSearchMetaDataColumns=<null>,sendAttemptsLower=<null>,sendAttemptsUpper=<null>,attachment=false,error=false]" ] 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ "includeContent", "false" ] 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ "offset", "0" ] 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ "limit", "21" ] 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ "channel", 
 
\t \t \t \t \t \t \t \t \t \t \t \t "Channel[id=44ab0667-d42c-496c-bca2-2bd7eecd6dc9,name=API jQuery Direct]" ] 
 
\t \t \t \t \t \t \t \t \t } ], 
 
\t \t \t \t \t \t \t "_class" : "linked-hash-map" 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t "outcome" : "SUCCESS", 
 
\t \t \t \t \t \t "userId" : "1", 
 
\t \t \t \t \t \t "ipAddress" : "127.0.0.1", 
 
\t \t \t \t \t \t "serverId" : "f85e48e2-32b3-429f-bee5-31630d8143a2" 
 
\t \t \t \t \t } ] 
 
\t \t } 
 
\t }; 
 

 
\t $(document).ready(function() { 
 
\t \t $('#table_id').DataTable({ 
 
\t \t \t data : jsdata.list.event, 
 
\t \t \t columns : [ { 
 
\t \t \t \t title : "Id", 
 
\t \t \t \t data : 'id' 
 
\t \t \t }, { 
 
\t \t \t \t title : "Level", 
 
\t \t \t \t data : 'level' 
 
\t \t \t }, { 
 
\t \t \t \t title : "Name", 
 
\t \t \t \t data : 'name' 
 
\t \t \t }, { 
 
\t \t \t \t title : "UserId", 
 
\t \t \t \t data : 'userId' 
 
\t \t \t }, { 
 
\t \t \t \t title : "Ip Address", 
 
\t \t \t \t data : 'ipAddress' 
 
\t \t \t } 
 

 
\t \t \t ] 
 
\t \t }); 
 
\t });
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 

 

 
<table id="table_id" class="display" width="100%"></table>

+0

助けてくれてありがとう@abhijeet。 さらに1つのフィールドに2つのデータを追加するにはどうすればいいですか?たとえば、IDとレベルを1つのフィールドに表示したいとします。 – Erdogan

+0

ようこそ@ObsessiO – Abhijeet

+0

私のコメントは更新されましたが、この@Abhijeetの通知はありませんでした。 1つのフィールドに2つのデータを追加するにはどうすればよいですか?たとえば、「ID」と「レベル」を1つのフィールドに表示したいとします。 – Erdogan

0
  • あなたは、2列の表のサンプルコードを以下に示しcolumns.dataプロパティ

であなたは、各列のデータプロパティを指定する必要がJSON.stringify

  • を使用する必要はありません。列を追加するためにさらにcolumn.dataのエントリを追加します。

    $('#table_id').DataTable({ 
        data: jsonObj.list.event, 
        columns: [ 
         { data: 'name' }, 
         { data: 'level' } 
        ] 
    }); 
    
  • +0

    おかげで、あなたは非常に多くの@ Gyrocode.com:

    あなたは私があなたのjsonデータを使用して作成した次のDataTableのコードを参照することができます。 – Erdogan

    関連する問題