DataTables SearchPane rendering

DataTables SearchPane rendering

shavertechshavertech Posts: 4Questions: 1Answers: 0

Link to test case: https://codepen.io/shavertech/pen/qBLByOR
Debugger code (debug.datatables.net):
Error messages shown: N/A
Description of problem: I'm using the SearchPanes extension of DataTables, and having a bit of trouble understanding how to render links in the table, but not in the SearchPane. Any documentation I've come across has said that the type in panes should be filter, while the table is display.

Replies

  • colincolin Posts: 15,237Questions: 1Answers: 2,599

    Thanks for the test case. I took a look but I'm not clear what the issue is. Could you describe what you'd expect to happen, and what you're seeing instead!

    Colin

  • shavertechshavertech Posts: 4Questions: 1Answers: 0

    Hi Colin, the issue is that the SearchPane is showing the text as links, but I only want the table to show the links. I tried to use the render function to handle that difference, but it doesn't seem to work with the "filter" type.

    "render": function(data, type, row, meta) {
    if (type === 'filter') {
    return data; // Show original text in searchPane
    } else {
    return '<a href="' + row.Link + '">' + data + '</a>'; // Render link in displayed table
    }
    }

  • colincolin Posts: 15,237Questions: 1Answers: 2,599

    Ah I see, thanks for the explanation.

    You need to do two things.

    First, the code above is slightly wrong, it would be better as:

          { 
            "data": "Forums",
            "render": function(data, type, row, meta) {
              if (type === 'display') {
                return '<a href="' + row.Link + '">' + data + '</a>'; // Render link in displayed table
              }
    
              // this means the ordering and filtering use the unformatted data
              return data;
            }
          }, 
    

    Then, when you define the SearchPanes data for that column,

          {
            searchPanes: {
              show: true,
              orthogonal: 'filter'
            },
            targets: [0]
          },
    

    I tried updating your example to demonstrate, but couldn't work out how to fork it!!

    Colin

Sign In or Register to comment.