How to display the rendered data in searchpane un rendered?

How to display the rendered data in searchpane un rendered?

muneermuneer Posts: 2Questions: 1Answers: 1

I have the following data:

 data = [
{
          "platform":"Adelphic",
          "partner": ["A9", "AdColony", "AdX", "DailyMotion", "Flurry"],
          "environment": ["Desktop", "Mobile"],
          "format": ["Rich Media", "Standard Banner", "Video"],
          "dimension": ["160x160", "320x2540", "300x300", "728x346"],
          "locations": ["EMEA", "US"],
          "image": "{% static 'img/adelphic-logo.png' %}"
        }

I used below to display it in datatable with searchpane

$(document).ready(function () {
  $('#example').DataTable({

    columnDefs:[
        {
            searchPanes:{
                show: true,
                threshold: 1,
            },
            targets: [0,1,2,3,5],

        },
      ],
      dom: 'Pfrtlip',
      "processing": true,
      "info": true,
      "stateSave": true,
      data: data,
      "columns": [
          { "data": "platform" },
          { "data": "partner",
            render: function ( data , row ) {
                    var output='';
                     $.each(data, function(index,item) {
                      //alert(index);
                      
                      output+= data[index]+'<br>';
                    });
                   return output;
                 },
            searchPanes: {
              show: true,
              data: "partner"
            }

        },
        { "data": "environment" },
        { "data": "format" },
        { "data": "dimension" },
        { "data": "locations" },

    ],


  });

});

Everything working fine. The only problem is with the searchpane. In searchpane the column Partner is displaying as rendered format. I want the same as other columns like I want each array element as an option

Check the screenshot of current search pane

I want it as below with the same rendering in datatable display. Is it possible?

Thank you in advance

This question has an accepted answers - jump to answer

Answers

  • sandysandy Posts: 97Questions: 0Answers: 17
    edited February 3

    Hi muneer,

    Yes it is possible, take a look at this example. You'll also need to take a look at the columns.render documentation.

    What's happening is that you are setting a default render for the DataTable and another for SearchPanes. In your case you will want to do something like as follows...

    ...
    "columns": [
        { "data": "platform" },
        { "data": "partner",
            render: {
                _: function ( data , row ) {
                    var output='';
                    $.each(data, function(index,item) {
                        //alert(index);
                           
                        output+= data[index]+'<br>';
                    });
                    return output;
                },
                // You may need to change the `name` property to suit your data
                sp: '[].name'
            }
            searchPanes: {
                show: true,
                data: "partner"
            }
        },
    ...
    

    Hope this helps,
    Sandy

  • colincolin Posts: 8,150Questions: 0Answers: 1,364

    @muneer Please note that @sandy meant this example.

  • sandysandy Posts: 97Questions: 0Answers: 17

    Yes sorry my mistake, thanks for picking that up @colin

  • muneermuneer Posts: 2Questions: 1Answers: 1
    Answer ✓

    Thanks @sandy and @colin

    I found the solution.

    Take a look at my final code below.

    Just assigned the array to 'sp' and set orthogonal as 'sp'

     "columns": [
    
              { "data": "partner",
                render: {
                  _: function ( data , row ) {
                        var output='';
                         $.each(data, function(index,item) {
                          //alert(index);
    
                          output+= data[index]+'<br>';
                        });
                       return output;
                     },
                    sp: '[]'
                },
                searchPanes: {
                  show: true,
                  orthogonal:'sp'
                }
    
            },
            
      ]
    
  • piotrczpiotrcz Posts: 2Questions: 0Answers: 0

    @sandy / @colin I have the same case as @muneer but I'm applying datatables on already prepared html5 table. Is there a way to set and use custom rendering with data-* attribute of a cell?

  • allanallan Posts: 51,467Questions: 1Answers: 7,761 Site admin

    No - I'm afraid there isn't as you can't define functions through the data-* attributes. This specific use case needs a function as shown above.

    Allan

  • piotrczpiotrcz Posts: 2Questions: 0Answers: 0

    @allan thanks for info.
    Maybe it would be possible to just implement a function that would strip html from the cell content? Like a jQuery.text() method?
    My issue is with Bootstrap's badges and FontAwesome icons.
    Piotr

Sign In or Register to comment.