डेटाटेबल्स - अजाक्स डेटा स्रोत से गतिशील कॉलम?

Question

मैं डेटाटेबल्स को AJAX डेटा स्रोत से कॉलम नाम पढ़ने के लिए प्राप्त करने का प्रयास कर रहा हूं लेकिन ऐसा लगता है कि यहां कुछ ऐसा होना चाहिए जो मुझे यहां याद आना चाहिए।

मैंने एक पहेली fiddle बनाया जिसमें मैं तालिका द्वारा उपयोग किए जा रहे डेटा और कॉलम मैन्युअल रूप से परिभाषित कर सकता हूं।

तालिका HTML में घोषित किया जाता है और वहाँ कोई नहीं स्तंभ नाम को परिभाषित करने के (<thead>..</thead>) की जरूरत है:

<table id="example" class="display table table-striped table-bordered" 
     cellspacing="0" width="100%"></table> 

जे एस हम मैन्युअल रूप से डेटा को परिभाषित: फिर

var data = [ 
    [ "Row 1 - Field 1", "Row 1 - Field 2", "Row 1 - Field 3" ], 
    [ "Row 2 - Field 1", "Row 2 - Field 2", "Row 2 - Field 3" ], 
]; 

कॉलम नाम या शीर्षक मैन्युअल रूप से परिभाषित करें:

var columns = [ 
    { "title":"One" }, 
    { "title":"Two" }, 
    { "title":"Three" } 
]; 

तब जब हम तालिका प्रारंभ करते हैं हम बस DataTables का उपयोग करने के लिए भर में पहले से घोषित जानकारी पास:

$(document).ready(function() { 
    $('#example').DataTable({ 
    dom: "Bfrtip", 
    data: data, 
    columns: columns 
    }); 
}); 

कौन सा में परिणाम:

अब

मेरे सवाल का मैं कैसे करता है, तो डेटा में शामिल है यह काम करने के लिए मिल जाएगा AJAX server side response?

मैंने इसे विभिन्न तरीकों और रूपों में आजमाया है लेकिन वास्तव में यहां कुछ भी काम नहीं कर रहा है और मैं इस पर सापेक्ष दस्तावेज़ीकरण खोजने के लिए जूझ रहा हूं।

उदाहरण के लिए यदि सर्वर साइड प्रसंस्करण वापस भेजा एक JSON प्रतिक्रिया जो अंत में स्तंभ नाम शामिल हैं:

{ 
    "data": [ 
    { 
     "id": "1", 
     "One": "Row 1 - Field 1", 
     "Two": "Row 1 - Field 2", 
     "Three": "Row 1 - Field 3" 
    }, 
    { 
     "id": "2", 
     "One": "Row 2 - Field 1", 
     "Two": "Row 2 - Field 2", 
     "Three": "Row 2 - Field 3" 
    } 
    ], 
    "options": [], 
    "files": [], 
    "columns": [ 
    { 
     "title": "One", 
     "data": "One" 
    }, 
    { 

     "title": "Two", 
     "data": "Two" 
    }, 
    { 
     "title": "Three", 
     "data": "Three" 
    } 
    ] 
} 

को देखते हुए यह है प्रतिक्रिया, मैं DataTables कॉन्फ़िगर करने के लिए के लिए एक AJAX डेटा स्रोत का उपयोग करने की कोशिश की के रूप में पंक्ति जानकारी इस प्रकार है:

$(document).ready(function() { 
    $('#example').DataTable({ 
    dom: "Bfrtip", 
    "ajax": '/test.php', 
    columns: columns 
    }); 
}); 

लेकिन स्पष्ट रूप से columns यहाँ अनिर्धारित रहता है।

तो मैं पहले से कॉलम का डेटा प्राप्त:

function getPromise() { 
    var deferred = $.Deferred(); 
    var dataUrl = document.location.origin+'/text.php'; 
    $.getJSON(dataUrl, function(jsondata) { 
    setTimeout(function() { 
     deferred.resolve(jsondata); 
    }, 0); 
    }).fail(function(jqxhr, textStatus, error) { 
    // ********* FAILED 
    var err = textStatus + ", " + error; 
    console.log("Request Failed: " + err); 
    }); 
    return deferred.promise(); 
} 
// Get the columns 
getPromise().done(function(jsondata) { 
    columns = jsondata.columns; 
    console.log(columns); 
}); 

और DataTables करने के लिए यह रूप में ऊपर से गुजरती हैं। लेकिन इस बार जब मैं उदाहरण चला रहा हूं तो मुझे लगता है कि कंसोल में TypeError: p is undefined कह रहा है।

तो फिर मैं गतिशील रूप से जेनरेट किए गए कॉलम का उपयोग कैसे कर सकता हूं जो सर्वर साइड प्रतिक्रिया में वापस आ रहे हैं? क्या इसे हासिल करने का कोई आसान तरीका नहीं है?

संपादित करें:

<?php 
// DataTables PHP library 
require_once '/path/to/DataTables.php'; 

// Alias Editor classes so they are easy to use 
use 
    DataTables\Editor, 
    DataTables\Editor\Field, 
    DataTables\Editor\Format, 
    DataTables\Editor\Mjoin, 
    DataTables\Editor\Upload, 
    DataTables\Editor\Validate; 

// Build our Editor instance and process the data coming from _POST 
$out = Editor::inst($db, 'example') 
    ->fields(
    Field::inst('id')->set(false), 
    Field::inst('`One`')->validator('Validate::notEmpty'), 
    Field::inst('`Two`')->validator('Validate::notEmpty'), 
    Field::inst('`Three`')->validator('Validate::notEmpty') 
) 
    ->process($_POST) 
    ->data(); 

// On 'read' remove the DT_RowId property so we can see fully how the `idSrc` 
// option works on the client-side. 
if (Editor::action($_POST) === Editor::ACTION_READ) { 
    for ($i=0, $ien=count($out['data']) ; $i<$ien ; $i++) { 
     unset($out['data'][$i]['DT_RowId']); 
    } 
} 

// Create the thead data 
if (count ($out) > 0) { 
    $columns = array(); 
    foreach ($out['data'][0] as $column=>$relativeValue) { 
    // Add all but the id value 
    if ($column !== 'id') { 
     // Add this column name 
     $columns[] = array(
     "title"=>$column, 
     "data"=>$column 
    ); 
    } 
    } 
} 
// Add the the thead data to the ajax response 
$out['columns'] = $columns; 
// Send the data back to the client 
echo json_encode($out); 

Answer 1

आप DataTables ajax में बनाया उपयोग नहीं करते हैं यह देखते हुए आसान पर्याप्त होना चाहिए: सर्वर साइड प्रसंस्करण के लिए

DataTables संपादक कोड/JSON उत्तर ऊपर उल्लेख किया है उत्पन्न करने के लिए अपने डेटा की संरचना:

$(document).ready(function() { 
    $.ajax({ 
     type: 'POST', 
     dataType: 'json', 
     url: '/echo/json/', 
     data: { 
      json: JSON.stringify(jsonData) 
     }, 
     success: function(d) { 
      $('#example').DataTable({ 
       dom: "Bfrtip", 
       data: d.data, 
       columns: d.columns 
      }); 
     } 
    }); 
}); 

this JSFiddle की तरह, आप एक बार ख बिल्कुल डेटा लोड हो रहा करने के लिए तो हो सकते हैं, क्योंकि यह एक बड़ा मुद्दा नहीं होना चाहिए ... जब तक कि आप इसे प्रारंभिक ajax कॉल से कॉलम प्राप्त न करें और डेटाटेबल शुरू होने के बाद, अंतर्निहित ajax जोड़ें - मैंने यह कोशिश नहीं की है ...