首页 > jQuery datatable 显示图表信息时,如何将图片url显示为相应地址的图片,无url的不显示?

jQuery datatable 显示图表信息时,如何将图片url显示为相应地址的图片,无url的不显示?

ajax 文件:

{
    "list": [
        {
            "uid": "3",
            "username": "3",
            "password": "26629555d5e54c953b60b40f0beee96f",
            "user_head": "http://www.zgwhl.com/agent/agent/images/3_head.jpg",
            "salt": "171327",
            "role": "1",
            "name": "周杰伦",
            "status_auth": "2",
            "status_pause": "0",
            "money": "11",
            "money_pay": "0",
            "loupan": "123",
            "company": "我爱我家",
            "mdid": "我爱我家杭州电",
            "rpid": null,
            "sfz": "333333333333333333",
            "sfz_zm": "/data/website/agency/uploads/sfz/3_zm.jpg",
            "sfz_fm": "/data/website/agency/uploads/sfz/3_fm.jpg",
            "time_create": "2016-06-15 20:58:08",
            "phone_contact": "",
            "count": "22",
            "count_cj": "1",
            "count_lj": "6"
        },
        {
            "uid": "4",
            "username": "4",
            "password": "92b176421601ad8cfe58900e70779d05",
            "user_head": "http://www.zgwhl.com/agent/agent/images/4_head.jpg",
            "salt": "557452",
            "role": "5",
            "name": "test",
            "status_auth": "2",
            "status_pause": "0",
            "money": "5",
            "money_pay": "0",
            "loupan": null,
            "company": "yeah",
            "mdid": "我爱我家",
            "rpid": null,
            "sfz": "",
            "sfz_zm": null,
            "sfz_fm": null,
            "time_create": "2016-06-15 21:42:38",
            "phone_contact": "",
            "count": "1",
            "count_cj": "0",
            "count_lj": "1"
        },
        {
            "uid": "6",
            "username": "10010",
            "password": "c16a5320fa475530d9583c34fd356ef5",
            "user_head": "",
            "salt": "1",
            "role": "5",
            "name": "32a",
            "status_auth": "0",
            "status_pause": "0",
            "money": "0",
            "money_pay": "0",
            "loupan": null,
            "company": "淘房",
            "mdid": "HZKL2",
            "rpid": null,
            "sfz": "9999999999999999",
            "sfz_zm": null,
            "sfz_fm": null,
            "time_create": "2016-06-05 22:23:46",
            "phone_contact": "",
            "count": "0",
            "count_cj": "0",
            "count_lj": "0"
        },
        {
            "uid": "7",
            "username": "yangdaxia",
            "password": "75e38e33c7ac8c725a06544b298620b6",
            "user_head": "",
            "salt": "499167",
            "role": "1",
            "name": "杨大侠",
            "status_auth": "0",
            "status_pause": "0",
            "money": "9",
            "money_pay": "0",
            "loupan": null,
            "company": "我爱我家",
            "mdid": "HZKL3",
            "rpid": null,
            "sfz": null,
            "sfz_zm": null,
            "sfz_fm": null,
            "time_create": "2016-06-05 22:23:46",
            "phone_contact": "",
            "count": "1",
            "count_cj": "1",
            "count_lj": "1"
        },
        {
            "uid": "9",
            "username": "15700079592",
            "password": "6ae9cc26159303c9880c9c8e37434a25",
            "user_head": "",
            "salt": "251659",
            "role": "1",
            "name": "wulala",
            "status_auth": "1",
            "status_pause": "0",
            "money": "0",
            "money_pay": "0",
            "loupan": null,
            "company": "东方不败",
            "mdid": "0110",
            "rpid": null,
            "sfz": "000000111100000000",
            "sfz_zm": "/var/www/agent/agent/uploads/sfz/9_zm.jpg",
            "sfz_fm": "/var/www/agent/agent/uploads/sfz/9_fm.jpg",
            "time_create": "2016-06-05 22:23:46",
            "phone_contact": "",
            "count": "0",
            "count_cj": "0",
            "count_lj": "0"
        },
        {
            "uid": "10",
            "username": "15869024286",
            "password": "1dc1d38995fd63c6293508dea77e42ff",
            "user_head": "images/10_head.jpg",
            "salt": "729054",
            "role": "1",
            "name": "anzheng",
            "status_auth": "0",
            "status_pause": "0",
            "money": "0",
            "money_pay": "0",
            "loupan": null,
            "company": "我爱我家",
            "mdid": "123",
            "rpid": null,
            "sfz": null,
            "sfz_zm": null,
            "sfz_fm": null,
            "time_create": "2016-06-05 22:23:46",
            "phone_contact": "",
            "count": "0",
            "count_cj": "0",
            "count_lj": "0"
        },
        {
            "uid": "11",
            "username": "13588073934",
            "password": "ad3b93f0cf21a59be45875aa64f81f94",
            "user_head": "http://www.zgwhl.com/agent/agent/images/11_head.jpg",
            "salt": "881196",
            "role": "1",
            "name": "zyc",
            "status_auth": "2",
            "status_pause": "0",
            "money": "0",
            "money_pay": "0",
            "loupan": null,
            "company": "呵呵",
            "mdid": "1",
            "rpid": null,
            "sfz": null,
            "sfz_zm": null,
            "sfz_fm": null,
            "time_create": "2016-06-05 22:24:37",
            "phone_contact": "",
            "count": "1",
            "count_cj": "0",
            "count_lj": "1"
        },
        {
            "uid": "13",
            "username": "13588879099",
            "password": "ac5c207c3d999bedc16fe97b00f084c4",
            "user_head": "",
            "salt": "947519",
            "role": "1",
            "name": "林启彦",
            "status_auth": "0",
            "status_pause": "0",
            "money": "0",
            "money_pay": "0",
            "loupan": null,
            "company": "呵呵",
            "mdid": "淘房家",
            "rpid": null,
            "sfz": null,
            "sfz_zm": null,
            "sfz_fm": null,
            "time_create": "2016-06-05 22:24:37",
            "phone_contact": "",
            "count": "0",
            "count_cj": "0",
            "count_lj": "0"
        },
        {
            "uid": "14",
            "username": "17742038412",
            "password": "723466c40cb3449fd116e573725a7d08",
            "user_head": "",
            "salt": "714662",
            "role": "1",
            "name": "陈楠",
            "status_auth": "0",
            "status_pause": "0",
            "money": "6",
            "money_pay": "0",
            "loupan": null,
            "company": "淘房",
            "mdid": "再回首",
            "rpid": null,
            "sfz": null,
            "sfz_zm": null,
            "sfz_fm": null,
            "time_create": "2016-06-05 22:24:37",
            "phone_contact": "",
            "count": "1",
            "count_cj": "0",
            "count_lj": "1"
        },
        {
            "uid": "15",
            "username": "15381182299",
            "password": "5a792cc6373b2ad7d14fd979ce21e0b3",
            "user_head": "",
            "salt": "465103",
            "role": "1",
            "name": "钱昊",
            "status_auth": "2",
            "status_pause": "0",
            "money": "9",
            "money_pay": "0",
            "loupan": null,
            "company": "yeah",
            "mdid": "888",
            "rpid": null,
            "sfz": "1",
            "sfz_zm": "/var/www/agent/agent/uploads/sfz/15_zm.jpg",
            "sfz_fm": null,
            "time_create": "2016-06-05 22:24:37",
            "phone_contact": "",
            "count": "1",
            "count_cj": "1",
            "count_lj": "1"
        },
        {
            "uid": "18",
            "username": "test",
            "password": "0128feddc6ea8a60d13d66b0c1fbcbd3",
            "user_head": "",
            "salt": "867030",
            "role": "1",
            "name": "wulala",
            "status_auth": "2",
            "status_pause": "0",
            "money": "0",
            "money_pay": "0",
            "loupan": null,
            "company": "wucompany",
            "mdid": null,
            "rpid": null,
            "sfz": "",
            "sfz_zm": null,
            "sfz_fm": null,
            "time_create": "2016-06-15 21:32:46",
            "phone_contact": "15700079592",
            "count": "0",
            "count_cj": "0",
            "count_lj": "0"
        },
        {
            "uid": "19",
            "username": "18957150439",
            "password": "fdbeaf82a8476f26ce19a588c32d9a1b",
            "user_head": "http://www.zgwhl.com/agent/agent/images/19_head.jpg",
            "salt": "395852",
            "role": "1",
            "name": "刘晓",
            "status_auth": "0",
            "status_pause": "0",
            "money": "7",
            "money_pay": "0",
            "loupan": null,
            "company": "",
            "mdid": "我爱我家",
            "rpid": null,
            "sfz": null,
            "sfz_zm": null,
            "sfz_fm": null,
            "time_create": "2016-06-13 17:50:28",
            "phone_contact": null,
            "count": "1",
            "count_cj": "0",
            "count_lj": "0"
        },
        {
            "uid": "20",
            "username": "18368118811",
            "password": "279b04fb2676fa0cb860fb73a1593bd8",
            "user_head": "http://www.zgwhl.com/agent/agent/images/20_head.jpg",
            "salt": "558484",
            "role": "1",
            "name": "刘晓",
            "status_auth": "1",
            "status_pause": "0",
            "money": "0",
            "money_pay": "0",
            "loupan": null,
            "company": "",
            "mdid": "我爱我家",
            "rpid": null,
            "sfz": "450202198208110668",
            "sfz_zm": "http://www.zgwhl.com/agent/agent/images/20_zm.jpg",
            "sfz_fm": "http://www.zgwhl.com/agent/agent/images/20_fm.jpg",
            "time_create": "2016-06-15 19:16:57",
            "phone_contact": null,
            "count": "5",
            "count_cj": "0",
            "count_lj": "1"
        }
    ]
}

js 代码如下:


$(document).ready(function(){
        $("#example").DataTable({
                data: "objects.txt",

                columns: [
                    {
                        "data": "uid"
                    },
                    {
                        "data": "username"
                    },
                    {
                        "data": "password"
                    },{
                        "data": "user_head"
                    },
                    {
                        "data": "salt"
                    },
                    {
                        "data": "role"
                    },
                    {
                        "data": "name"
                    },
                    {
                        "data": "status_auth"
                    },
                    {
                        "data": "status_pause"
                    },
                    {
                        "data": "money"
                    },
                    {
                        "data": "money_pay"
                    },
                    {
                        "data": "loupan"
                    },
                    {
                        "data": "company"
                    },
                    {
                        "data": "mdid"
                    },{
                        "data": "rpid"
                    },{
                        "data": "sfz"
                    },
                    {
                        "data": "sfz_zm"
                    },{
                        "data": "sfz_fm"
                    },{
                        "data": "time_create"
                    },{
                        "data": "phone_contact"
                    },{
                        "data": "count"
                    },{
                        "data": "count_cj"
                    },{
                        "data": "count_lj"
                    }
                      ]
              });
      });

html如下:

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>uid</th>
                <th>username</th>
                <th>password</th>
                <th>user_head</th>
                <th>salt</th>
                <th>role</th>
                <th>name</th>
                <th>status_auth</th>
                <th>status_pause</th>
                <th>money</th>
                <th>money_pay</th>
                <th>loupan</th>
                <th>company</th>
                <th>mdid</th>
                <th>rpid</th>
                <th>sfz</th>
                <th>sfz_zm</th>
                <th>sfz_fm</th>
                <th>time_create</th>
                <th>phone_contact</th>
                <th>count</th>
                <th>count_cj</th>
                <th>count_li</th>
                
                
            </tr>
        </thead>

        
        <tbody></tbody>

            <tfoot>
            </tfoot>
    </table>

我现在需要将第四个属性user_head 转换为相应的图片,没有url的不显示就行。我的想法是对user_head这一属性进行判断,不空的进行操作,具体怎么实现,想不到。
需要怎么做,求帮助!


官方api或者demo是有定义的 你再去看看吧
我记得 在columnDefs函数中可以修改返回的值, 'target'指的是columns里的值得位置,'render'调用自己定会议的函数来重置返回值并返回。
下面是我之前许久的一段代码

        var oTable1 = $('#table_job').dataTable({
            language: {
                "url":"<%=request.getContextPath()%>/static/json/Chinese.json"
            },
            ajax:{
                type:"get",
                url:"/search/applyRecords/${station.id}",
                dataSrc:"data",
            },
            columns:[
                     {data:"userId"},
                     {data:"managerName"},
                     {data:"userName"},
                     {data:"type"},
                     {data:"createdTime"},
            ],
            "columnDefs":[{
                "render":function(data,type,row){
                     return getOpetionStatus(data);
                },
                "targets":3,
            },
            {
                "render":function(data,type,row){
                     return getLocalTime(data);
                },
                "targets":4,
            }
            ],
        });

这样你应该可以操作你的数据了
写一个js判断 有值 就把值拼成<img src='url'> 没值 就返回空


周末两天休息,没上来看。周五的时候问题已经解决,在查看官网的时候找到了解决方案,就是用render 来定义返回值的。一楼是正解!

【热门文章】
【热门文章】