How to store a string and display only part of it

I am using datatables with mysql and php to display records and I have a column called 'Notes' which may contain 1 or more newlines, ( chr(10) ).

I am using

while( $row=mysqli_fetch_assoc($records) ){......

to fill the table and

$('#example tbody').on( 'click', 'tr',  function ()......

and

Notes = $('td', this).eq(6).text();

to get the value of 'notes' (and others) in the clicked row for populating an edit dialog.

All working fine.

I have been asked if it's possible to display only the first line of the notes column in the table which I have done using 'strpos' and 'substr' and it's OK

Unfortunately because the edit dialog gets it's data from the table I'm now only getting the first line.....

I'm guessing I need to collect the entire field before I chop off the back bit and then use this collection (maybe in an array ??) to populate the edit dialog.

I'm afraid I'm still a bit 'green' here and not sure of the best approach or how to fill and then access the array.

Thanks for any help.

Additional ....Additional ....Additional ....

Thanks Barmar, this looks like a nice clean fix but I'm not there yet..... I have added the CSS and the following code snippets..

** ListNotes = $('td:nth-child(6) .expanded', this).text();

and inside the php table 'while loop'

$findme = chr(10); 
$pos = strpos($row['ListNotes'], $findme); 
$lft = substr($row['ListNotes'], 0, $pos); 
.... 
echo "<td><span class='abbreviated'>".$lft."</span><span class='expanded'>".$row['ListNotes']."</span></td>";

and the table is displayed as expected.

I put a break in Firebug after the line marked ** and 'ListNotes' is an empty string ("") ??? I was hoping it would contain the whole string including any chr(10)'s. Have I done something wrong?

Answers


Put the full text in a hidden span:

<td><span class="abbreviated">First line...</span><span class="expanded">First line<br>Second line<br>Third line</span></td>

with CSS:

.expanded {
  display: none;
}

When you edit, get the notes to expand from the .expanded span:

var text = $('td:nth-child(6) .expanded', this).text();

After the edit, store the abbreviated and expanded result back into the appropriate spans:

$('td:nth-child(6) .expanded', this).text(edited_text);
$('td:nth-child(6) .abbreviated', this).text(abbreviated_text);

I meant to answer my own question a while ago but forgot. Here's how I solved it. In the table display I had 1 displayed column with the truncated string and 1 hidden column with the complete string. I used the hidden column for the edit dialog. Simple and effective.


Need Your Help

vb.net datagridview custom format

vb.net datagridview datagridviewcolumn

i have a datagridview the contents are as follows when i load the datagridview

Cant control JavaFX TitledPane with FXML

java user-interface javafx fxml

I have 2 projects; SmallProject, BigProject. SmallProject is a standalone java class, BigProject with 2 fxml and 2 controllers.