How do you allow carriage returns in a field in table view?

How do you allow carriage returns in a field in table view?

koniahinkoniahin Posts: 186Questions: 39Answers: 7

We have a couple columns like a question column. The full text might be up to 150 characters. We want to display the full text but set the column display with max so that it displays a maximum of 60 chars then a carriage return and next if that much.

With the default js and styling we have this doesn't work. data.length as well. In tale view it does not allow text to run to the next line. data.length serves another purpose.

{
targets: 3,
render: function(data, type, row) {
return type === "display" && data.length > 60 ?
data.substr(0, 60) + "…" :
data;
},
},

Question column displays on one line so am currently using data.length:

How do we display the full text but set the column display with max so that it displays a maximum of 60 chars then a carriage return and next if that much

We want:

How do we display the full text but set the column display
with max so that it displays a maximum of 60 chars then
a carriage return and next if that much

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    One option is this ellipsis plugin.

    See if this SO thrread has any ideas for you to add line breaks every 60 characters.

    Kevin

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    It seems simple enough so I tried adding ellipsis and commenting out field.length.

      {
        targets: 3,
        render: DataTable.render.ellipsis( 30 )
      },
    
      /*
      {
        targets: 3, 
        render: function(data, type, row) {
          return type === "display" && data.length > 30 ?
            data.substr(0, 30) + "…" :
            data;
        },
      },
      */
    

    The page loads blank, no table rows, and I see this console error:

    Uncaught ReferenceError: DataTable is not defined
    <anonymous> https://www.smokeymo.xyz/js/dt/contacts2.js:234
    mightThrow https://www.smokeymo.xyz/js/dashboard.js:51344
    process https://www.smokeymo.xyz/js/dashboard.js:51412

    The first line references the ellipis plugin, then the line and the rest I think laravel

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    What version of Datatables are you using. The DataTable object wasn't introduced until 1.11.0.

    Kevin

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7
    edited March 2023

    1.11.3 for DataTables Editor

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    Are you able to give me a link to your page showing the issue?

    Allan

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    No - it's private and built within laravel. I can only post code and follow instructions. My technical skills are limited.

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    Really difficult to help out without a test case, but let's see what we can do :). First of all - how are you including DataTables on your page?

    Allan

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7
    edited March 2023 Answer ✓

    Solved this by comparing with another table that works.

    < table id="tasks" class="table table-striped table-bordered nowrap" style="width:100%" >

    Removing the ".nowrap" class is the solution.

    < table id="tasks" class="table table-striped table-bordered" style="width:100%" >

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    Thanks for posting back with your solution.

    Allan

Sign In or Register to comment.