डेटाटेबल्स - नेस्टेड स्वतंत्र तालिका के साथ पंक्तियां नीचे ड्रिल करें

25

यहाँ मेरी JSFiddle (माउस को दिखाने के लिए के लिए प्रेस "रन"), जो स्वतंत्र नेस्टेड jQuery DataTables लागू करता है। इस मामले में मैं केवल मूल तालिका के एचटीएमएल की प्रतिलिपि बनाता हूं, और इसे एक नई तालिका बनाने की परेशानी बचाने के लिए, विवरण पंक्ति में पोस्ट करता हूं।

यहाँ कोड का केवल दिलचस्प हिस्सा वास्तव में बनाता है, NestedTables सरल विश्लेषण से अलग:

else {  /* Open this row */ 

      this.src = "http://i.imgur.com/d4ICC.png"; 

      // fnFormatDetails() pieces my Table together, instead you can 
      // use whatever code you like to create your nested Table html 
      oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, TableHtml), 'details'); 

      // ... and here I cast dataTable() on the newly created nestedTable 
      oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({ 
       "bJQueryUI": true, 
       "sPaginationType": "full_numbers" 
      }); 
      iTableCounter = iTableCounter + 1; 
     }

सूचना आप कैसे, स्वतंत्र रूप से फ़िल्टर कर सकते हैं क्रमबद्ध, आदि .. प्रत्येक मेज पर।

स्रोत

2012-09-13 15:23:03

15

मैं राफेल Cichocki उत्तम jsfiddle गतिशील डेटा और दो अलग अलग datatables जोड़ने के ऊपर एक बने पर जोर देना है कि तथ्य यह है कि विस्तार तालिका मास्टर तालिका से अलग हो सकते हैं:

http://jsfiddle.net/headwinds/zz3cH/

$('#exampleTable tbody td img').live('click', function() { 
      var nTr = $(this).parents('tr')[0]; 
      var nTds = this; 

      if (oTable.fnIsOpen(nTr)) { 
       /* This row is already open - close it */ 
       this.src = "http://i.imgur.com/SD7Dz.png"; 
       oTable.fnClose(nTr); 
      } 
      else { 
       /* Open this row */ 
       var rowIndex = oTable.fnGetPosition($(nTds).closest('tr')[0]); 
       var detailsRowData = newRowData[rowIndex].details; 

       this.src = "http://i.imgur.com/d4ICC.png"; 
       oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details'); 
       oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({ 
        "bJQueryUI": true, 
        "bFilter": false, 
        "aaData": detailsRowData, 
        "aoColumns": [ 
        { "mDataProp": "name" }, 
        { "mDataProp": "team" }, 
        { "mDataProp": "server" } 
       ], 
        "bPaginate": false, 
        "oLanguage": { 
         "sInfo": "_TOTAL_ entries" 
        } 
       }); 
       iTableCounter = iTableCounter + 1; 
      } 
     });

स्रोत

2014-03-25 18:48:14 headwinds

+0

उत्कृष्ट !!यही वह है जो मैं इंटरनेट के लिए खोज रहा था। धन्यवाद –

+0

@headwinds क्या आपको कोई जानकारी है [jQuery डेटाटेबल ड्रिल-डाउन पंक्तियां कैसे बनाएं?] (Http://stackoverflow.com/questions/39991927/how-to-create-jquery-datatable-drill-down-rows) अग्रिम धन्यवाद ... –

+0

@ClintEastwood मैंने आपके धागे पर एक संक्षिप्त रूप लिया - ऐसा लगता है कि आपको कुछ उत्कृष्ट मदद मिल रही है; -DI आपको एक पहेली या कोडपेन बनाने का प्रयास करने के लिए प्रोत्साहित करेगा और फिर अपने प्रयोग को साझा करेगा बिट टूटा – headwinds

0

भर में आया कुछ दिनों पहले यह पोस्ट *: - ऐसा लगता है कि उदाहरण में 'मामूली बग' होता है, जो "iTableCounter> newRowData.length" होता है: निहितार्थ यह है कि तालिका 'माउस-क्लिक पर' विस्तार और अनुबंध 'बंद हो जाती है।

सुझाया गया समाधान: काउंटर को '0' पर रीसेट कर रहा है। - यदि कोई मेरे सुझावों को अस्वीकार/सत्यापित करने में सक्षम होगा (क्योंकि जावास्क्रिप्ट अनुभव की मेरी भाषा नहीं है), तो मैं आभारी से अधिक होगा! ;)

(* मेरी पोस्ट एक साल बहुत देर हो चुकी है, तो मैं माफी माँगता हूँ हालांकि, महान कार्यक्षमता जो उदाहरण दिखाता है, मुझे आशा है कि मैं माफ कर दिया जाएगा)

दिया।। ओले क्रिस्टियन एक्सथ, एनटीएनयू, नॉर्वे

स्रोत

2015-08-25 22:49:12

1

मुझे इसके समान कुछ भी चाहिए, और नमूना के नीचे मैंने कैसे किया। किसी की मदद कर सकते हैं।

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script type="text/javascript" > 
    $(document).ready(function() { 

     $('tr.tree-toggler').click(function() { 
      $(this).parent().find('tr').eq(2).find('td.tree').toggle(300); 
     }); 
    }); 

</script> 
</head> 
<body> 

<table> 
    <tbody> 
    <tr> 
     <td> 

      <table> 
        <tbody> 

        <tr class="tree-toggler nav-header"> 
         <td> 
          <table border="1" style="width: 100%"> 
           <tbody> 
            <tr class="tree-toggler nav-header"> 
             <td style="width: 30px;"> 
              Demo 
             </td> 
             <td style="width: 200px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
            </tr> 
           </tbody> 
          </table> 
         </td> 
        </tr> 
        <tr> 
         <td class="nav nav-list tree" style="display: none;"> 
          <table class="table" border="1"> 
           <tbody> 
            <tr> 
              <td style="width: 30px;"> 
              Demo 
             </td> 
             <td style="width: 200px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
            </tr> 
            <tr> 
              <td style="width: 30px;"> 
              Demo 
             </td> 
             <td style="width: 200px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
            </tr> 

           </tbody> 
          </table> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td>   
      <table> 
        <tbody> 

        <tr class="tree-toggler nav-header"> 
         <td> 
          <table border="1" style="width: 100%"> 
           <tbody> 
            <tr class="tree-toggler nav-header"> 
             <td style="width: 30px;"> 
              Demo 
             </td> 
             <td style="width: 200px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
            </tr> 
           </tbody> 
          </table> 
         </td> 
        </tr> 
        <tr> 
         <td class="nav nav-list tree" style="display: none;"> 
          <table class="table" border="1"> 
           <tbody> 
            <tr> 
             <td style="width: 30px;"> 
              Demo 
             </td> 
             <td style="width: 200px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
            </tr> 
            <tr> 
             <td style="width: 30px;"> 
              Demo 
             </td> 
             <td style="width: 200px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
            </tr> 

            <tr> 
             <td style="width: 30px;"> 
              Demo 
             </td> 
             <td style="width: 200px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
             <td style="width: 100px;"> 
              Demo 
             </td> 
            </tr> 
           </tbody> 
          </table> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </td> 
    </tr> 
</tbody> 
</table> 
</body> 
</html>

स्रोत

2016-01-21 18:14:47 Rohit

3

@Rafael और @Headwinds से लेकिन नए एपीआई के साथ DataTables संस्करण 1.10.11 साथ नेस्टेड datatables की मेरी संस्करण। बूटस्ट्रैप का भी उपयोग करता है। दोनों की सबसे अच्छी पसंद है।

Nested Datatables 1.10.11 देखें।

$('#opiniondt tbody').on('click', 'td.details-control', function() { 
    var tr = $(this).closest('tr'); 
    var row = table.row(tr); 

    if (row.child.isShown()) { 
     // This row is already open - close it 
     row.child.hide(); 
     tr.removeClass('shown'); 
    } 
    else { 
     // Open this row 
     row.child(format(iTableCounter)).show(); 
     tr.addClass('shown'); 
     // try datatable stuff 
     oInnerTable = $('#opiniondt_' + iTableCounter).dataTable({ 
      data: sections, 
      autoWidth: true, 
      deferRender: true, 
      info: false, 
      lengthChange: false, 
      ordering: false, 
      paging: false, 
      scrollX: false, 
      scrollY: false, 
      searching: false, 
      columns:[ 
       { data:'refCount' }, 
       { data:'section.codeRange.sNumber.sectionNumber' }, 
       { data:'section.title' } 
      ] 
     }); 
     iTableCounter = iTableCounter + 1; 
    } 
});

स्रोत

2016-03-25 14:59:03

+0

धन्यवाद निकोलस, आपका उदाहरण बिल्कुल वही था जो मुझे चाहिए था। मैं आपको इस प्रश्न को अपने कोड से अपडेट करने की सराहना करता हूं। – AlbChu

+0

@ निकोलस क्या आपके बारे में कोई विचार है [jQuery डेटाटेबल ड्रिल-डाउन पंक्तियां कैसे बनाएं?] (Http://stackoverflow.com/questions/39991927/how-to-create-jquery-datatable-drill-down-rows) । अग्रिम धन्यवाद ... –

+0

जब मैंने इसे कार्यान्वित किया, तो इस घटना के साथ मेरे मुख्य परिणाम सेट के एक अलग पृष्ठ पर जाने के बाद इस घटना के साथ दो बार गोलीबारी कर दी गई (खुले बंद कर दिया गया)। मैंने '$ (' # opiniondt tbody ') को बदलकर इसे ठीक किया है (' क्लिक करें ',' td.details-control ', function() {} 'to' $ (' # opiniondt tbody td.details-control ') .on ('क्लिक करें', फ़ंक्शन() {} ' – kevinpo

0

यहाँ एक उदाहरण (ऊपर निकोलस के आधार पर ') जहां बच्चे datatable एक ajax कॉल का उपयोग करता है डेटाबेस से जानकारी प्राप्त करने के लिए है। नोट BuildBoMDataTable() मूल तालिका बनाता है, जबकि BuildBoMPartsDataTable() प्रत्येक बच्चे की तालिका को संभालता है।

var iTableCounter = 1; 
var oInnerTable; 
var boMDataTable = new Object; 

$(document).ready(function() { 
    BuildBoMDataTable(); 
    AddBomDataTableListener(); 
}); 

function AddBomDataTableListener() { 

    // Add event listener for opening and closing details 
    $('#boMDataTable tbody').on('click', 'td.details-control', function() { 
     var tr = $(this).closest('tr'); 
     var row = boMDataTable.row(tr); 

     if (row.child.isShown()) { 
      // This row is already open - close it 
      row.child.hide(); 
      tr.removeClass('shown'); 
     } 
     else { 
      // Add the html table shell of the datatable. 
      row.child(formatBomDataTableDetailRow(iTableCounter)).show(); 

      //show the datatable row. 
      tr.addClass('shown'); 

      // try datatable stuff 
      BuildBoMPartsDataTable(row.data(), iTableCounter); 
      iTableCounter = iTableCounter + 1; 
     } 
    }); 
} 

function BuildBoMDataTable() { 

    if ($.isEmptyObject(boMDataTable)) { 
     boMDataTable = $("#boMDataTable").DataTable({ 
      lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]], 
      pageLength: 10, 
      dom: "tip", 
      pagingType: "simple", 
      serverSide: true, 
      autowidth: false, 
      language: { 
       emptyTable: "You have no bill of materials associated with your groups and/or projects." 
      }, 
      ajax: { 
       url: "/remote/GetParentTableData", 
       type: "POST", 
       data: function (d) { 
        var searchData = 
         { 
          personID: $("#PersonID").val(), 
          selecttype: $("#SelectType").val(), 
          draw: d.draw, 
          length: d.length, 
          start: d.start, 
          order: d.order, 
          columns: d.columns, 
          orderbyfield: d.columns[d.order[0].column].data 
         }; 
        d.sData = JSON.stringify(searchData); 
       } 
      }, 
      columns: [ 
       { 
        className: 'details-control', 
        orderable: false, 
        data: null, 
        defaultContent: '<img class="details-control-mouseover" src="/Content/images/details_transparent_background.png" title="Click to see included parts." alt="Click to see included parts."/>' 
       }, 
       { data: "RecordSelector", orderable: false, class: 'dt-center', width: "6%" }, 
       { data: "Description", width: "25%" }, 
       { data: "TeamDetails", width: "25%" }, 
       { data: "CustomerGroupName", width: "13%" }, 
       { data: "ProjectGroupName", width: "13%" }, 
       { data: "ClassificationTypeDescription", width: "10%" }, 
       { data: "AuditDateFormatted", name: "AuditDateFormatted", className: 'dt-center', width: "10%" } 
      ], 
      order: [[2, "asc"]] 
     }); 
    } 
} 

function BuildBoMPartsDataTable(parentObjData, tableCounter) { 
    oInnerTable = $("#boMPartDataTable_" + tableCounter).DataTable({ 
     autoWidth: true, 
     dom: "tip", 
     pagingType: "simple", 
     serverSide: true, 
     //processing: true, 
     autowidth: false, 
     language: { 
      emptyTable: "This bill of material contains no part." 
     }, 
     ajax: 
     { 
      url: "/remote/GetChildTableData", 
      type: "POST", 
      data: function (d) { 
       var searchData = 
        { 
         bomID: parentObjData.BomID, 
         draw: d.draw, 
         length: d.length, 
         start: d.start, 
         order: d.order, 
         columns: d.columns, 
         orderbyfield: d.columns[d.order[0].column].data 
        }; 
       d.sData = JSON.stringify(searchData); 
      } 
     }, 
     columns: [ 
      { data: 'RecordSelector' }, 
      { data: 'PartNumber' }, 
      { data: 'Quantity' }, 
      { data: 'UomAbbreviation' }, 
      { data: 'StatusName' }, 
      { data: 'PartNotes' }, 
      { data: 'IsBomDescription' } 
     ] 
    }); 
} 

function formatBomDataTableDetailRow(table_id) { 
    return '<div class="table-responsive">' + 
      ' <table id="boMPartDataTable_' + table_id + '" class="table table-striped table-bordered">' + 
      '  <thead>' + 
      '   <tr>' + 
      '    <th></th>' + 
      '    <th title="Click to sort by part number." alt="Click to sort by part number.">PartNumber</th>' + 
      '    <th title="Click to sort by quantity." alt="Click to sort by quantity.">Quantity</th>' + 
      '    <th title="Click to sort by unit of measurement." alt="Click to sort by unit of measurement.">UoM</th>' + 
      '    <th title="Click to sort by status name." alt="Click to sort by status name.">Status Name</th>' + 
      '    <th title="Click to sort by part notes." alt="Click to sort by part notes.">Part Notes</th>' + 
      '    <th title="Click to sort by BoM indicator." alt="Click to sort by BoM indicator.">Is BoM</th>' + 
      '   </tr>' + 
      '  </thead>' + 
      '  <tbody></tbody>' + 
      ' </table>' + 
      '</div>'; 

}

स्रोत

2016-05-02 19:43:10 ScottLenart

डेटाटेबल्स - नेस्टेड स्वतंत्र तालिका के साथ पंक्तियां नीचे ड्रिल करें

उत्तर

संबंधित मुद्दे