收起展开效果夸张，但不是给用户看的

上图效果：

html:

{
    "mData": "summary",
    "mRender": function (data, type, row) {
        var summarystr = '';
        if (row.summary != null) {
            if (row.summary.length < 50) {
                summarystr = '<div style="word-break:break-all;word-warp:break-word;">' + row.summary + '</div>';
            } else {
                summarystr = '<div style="word-break:break-all;word-warp:break-word;">'
                    + row.summary.substr(0, 50) +
                    '<br><span style="color:#3ea49d;cursor:pointer;" class="zhan zhan' + row.id + '" dataid="' + row.id + '">' +
                    '<span style="border: 1px solid #3ea49d;margin:0.5px;padding:0;color:#3ea49d;" >.......展开</span></span>' +
                    '<span style="display: none;" class="zs' + row.id + '">' + row.summary.substr(50, row.summary.length) +
                    '<span style="color:#f3565d;cursor:pointer;"  class="shou shou' + row.id + '" dataid="' + row.id + '">' +
                    '<span style="border: 1px solid #f3565d;margin:0.5px;padding:0;color:#f3565d;" >收起</span></span></span></div>';
            }
        }
        var html = [];
        html.push(summarystr);
        return html.join('');
    }
}

js:

//展开和收缩
$(".zhan").live('click', function () {
    var strid = $(this).attr("dataid");
    $(this).css('display', 'none');
    $('.zs' + strid).css('display', 'block');
    $('.shou' + strid).css('display', 'block');
});
$(".shou").live('click', function () {
    var strid = $(this).attr("dataid");
    $(this).css('display', 'none');
    $('.zs' + strid).css('display', 'none');
    $('.zhan' + strid).css('display', 'block');
});