読者です 読者をやめる 読者になる 読者になる

もっと読むをtext/templateですっきり書く

<script>
var page = 1;
function getMore(){
    $.ajax({
        data : {"page" : page,"submit" : "more" },
        dataType : "json"
    }).done(function(json){
        var tablehtml = [];
        for( var i=0,l=json.length; i<l; i++ ){
            var elem = json[i];
            var html = $('#my-template').text()
                       .replace(/\{id\}/gm,elem.id)
                       .replace(/\{name\}/gm,elem.name)
                       .replace(/\{gif\}/gm,elem.gif)
                       .replace(/\{url\}/gm,elem.url)
                       .replace(/\{created_at\}/gm,elem.created_at);
            tablehtml.push(html);
        }
        $("#maintable tbody").append(tablehtml.join(""));
        page++;
    });
}

$(function(){
    // event 
    $("#more").on("click",getMore);
})
</script>
<script type="text/template" id="my-template">
  <tr>
    <td onclick="prop(this)" data-value="chk{id}"><input class="chk" id="chk{id}" type="checkbox" name="ids[]" value="{id}"/></td>
    <td class="left" onclick="prop(this)" data-value="chk{id}">
         <img data-original="{gif}" alt="gif" class="lazy" style="width:160px;height:90px"/><br/>
         {name}
    </td>
    <td onclick="prop(this)" data-value="chk{id}">{created_at}</td>
    <td><a href="{url}" target="_blank"><img src="video.png" style="width:40px;height:40px;"/></a></td>
  </tr>
</script>

text/templateを用意しておいて取得したJSONの値でreplaceしてテーブルのtbodyのおしりにつけるのですよ。
アクセス先はphpなのですけれど

    header("Content-Type: application/json; charset=utf-8");
    echo json_encode($result);
    exit;

としてやって処理を終わらせてやると良い。