कम से कम, यह पहले प्रतिपादन था कर रहा था। मैंने एक DataTable बनाया है जिसमें दस्तावेज़ों की पंक्तियाँ (JSON डेटा द्वारा पॉप्युलेट) और एक चेकबॉक्स है जो प्रत्येक से मेल खाता है। चेकबॉक्स पर क्लिक करने से यह एक अलग div ("पसंदीदा सूची") में जुड़ जाता है, और यह हाल तक काम कर रहा था।

मैंने तालिका में कुछ अन्य कॉलम शामिल किए हैं और किसी कारण से ऐसा लगता है कि यह चेकबॉक्स के साथ विरोध कर रहा है। मेरा मानना ​​​​है कि नए कॉलम के साथ जाने के लिए मुझे अपने कोड में कुछ जोड़ना/अपडेट करना है, लेकिन मुझे यकीन नहीं है कि मैं इसके बारे में कैसे जाउंगा। कोई विचार?

तालिका डेटा लोड हो रहा है:

loadTableData() {
    $.noConflict();
    let tableRes = JSONfile.d.results.filter(function(val) { 
      return (val.FileLeafRef.trim().length > 0);
    }).map(function(obj) {
      return {
        "Path": obj.EncodedAbsUrl,
        "Titles": obj.File.Name,
        "Categories": obj.ResourceType.results.map(function(val) {
          return val.Label;
        }).join(";"),
        "Blank": ''
        }
      });

डेटाटेबल प्रतिपादन:

$('#km-table-id').DataTable( {
      columns: [
        { data: "Blank" },
        { data: "Titles" }, // populates col-2 column with docs
        { data: "Categories" }, // hidden col-3 categories
        { data: "Blank" }
      ],
      columnDefs: [
        {
          data: "Path",
          ordering:  true, targets: [1],
          render: function(data, type, row) {
            return $('<a>')
              .attr({target: "_blank", href: row.Path})
              .text(data)
              .wrap('<div></div>')
              .parent()
              .html();
          },
          targets: [1]
        },
        { searchable: true, targets: [2], visible: false }, 
      ],
      data: tableRes,
      language: { searchPlaceholder: "Search All Documents" },
      lengthMenu: [ 10, 25, 50, 100, 250, 500 ],
      order: [],
      pageLength: 500,
    //   paging: true,
      pagingType: "full_numbers",
      responsive: true,
        scrollCollapse: true,
        scrollXInner: true,
        scrollY: 550,
      sDom: '<"top">rt<"bottom"flp><"left">' // puts dropdown on bottom
    });

पसंदीदा कार्यक्षमता:

function faveFunc(evt) {
    var anchor = $($(evt.target).prev().find("a")[0]).clone();
    switch($(".populate-faves").find("a:contains(" + $(anchor).text() + ")").length)
    {
      case 0:
        $(".populate-faves").append(anchor);
        break;
      default:
        $(".populate-faves > a:contains(" + $(anchor).text() + ")").remove();
        break;
    }

    console.log(faveFunc);

  }; // ------------ faveFunc


function newList() {
    let data = $(evt.target).prev().find("a").eq(0).html();
     let outputList = $(".populate-faves");

     $(".populate-faves").html("");

    $("#km-table-id tbody tr").each(function(i, el) {
      let fave = $(".checkbox-class", el);
      let itemText = $(data, el);

      if(fave.prop("checked")) {
        outputList.append("<li>" + itemText.html() + "<li>");
      }
    });
  };


  $(".checkbox-class").on("click", faveFunc);
  $("#add-id").on("click", function(){
    console.log($(this));
  });

एचटीएमएल स्निपेट:

<table id="km-table-id" class="cell-border display stripe-hover">
          <thead>
            <tr>
              <th></th>
              <th>Title</th>
              <th>Categories</th>
              <th>My Favorites</th>
            </tr>
          </thead>

          <!-- <tbody>

          </tbody>  -->

        </table>
0
Bodrov 5 फरवरी 2019, 23:25

1 उत्तर

सबसे बढ़िया उत्तर

अद्यतन: मुझे एक (काम करने वाला) समाधान मिला।

मूल रूप से "शीर्षक" का डेटाटेबल कॉलम प्रत्येक चेकबॉक्स के साथ ठीक से मेल खाने के लिए अंतिम स्थिति में होना चाहिए। मुझे यकीन है कि एक समाधान है जहां मेरे पास कॉलम आ सकते हैं और चेकबॉक्स संलग्न करना काम करेगा, लेकिन यह अभी के लिए ठीक है।

$('#km-table-id').DataTable( {
      columns: [
        { data: "Blank" },
        { data: "Categories" }, // hidden
        { data: "Blank" },
        { data: "Titles" } // MUST be in last position to respond w/ checkboxes
      ],
      columnDefs: [
        {
          data: "Path", 
          ordering:  true, targets: [3],
          render: function(data, type, row) {
            return $('<a>')
              .attr({target: "_blank", href: row.Path})
              .text(data)
              .wrap('<div></div>')
              .parent()
              .html();
          },
          targets: [3]
        },
        { searchable: true, targets: [1], visible: false },
      ],

...

मैंने एक क्लीनर संस्करण लागू करने की कोशिश की जहां कॉलमडिफ्स { data: "Titles"... के तहत घोंसला है, लेकिन यह काम नहीं किया। फिलहाल मैं उपरोक्त कोड के साथ चिपका हुआ हूं।

0
Bodrov 6 फरवरी 2019, 20:37