如何实现JS/JQ数据获取及插入;

疑问:
因为初学不久,所以实践能力较为薄弱,导师安排的问题捣鼓了一天还是没有解决,,求各位友友的帮忙;

具体要求:
1:实现页面基础样式
2:实现单选,多选,全选功能
3:实现删除,增加功能
4:实现数据查询过滤功能
5:实现数据排序显示功能
6:左边那个联系人和订阅功能不需要实现

实现效果:

数据调用[data.js]:

/**
 * Created by WIN7 on 2015/7/28.
 */

var dataResource = [
    {
        "name": "骏越",
        "id": 100019277274,
        "bucount": 4,
        "createDate": "2015-07-09 10:38:41",
        "openRate": 0,
        "clickRate": 0
    },
    {
        "name": "订阅者",
        "id": 100019277391,
        "bucount": 4,
        "createDate": "2015-07-09 11:32:55",
        "openRate": 0,
        "clickRate": 0
    },
    {
        "name": "导入组20140807",
        "id": 100019193111,
        "bucount": 4,
        "createDate": "2014-07-17 21:11:47",
        "openRate": 33.33,
        "clickRate": 16.67
    },
    {
        "name": "导入组",
        "id": 100019225111,
        "bucount": 1,
        "createDate": "2014-08-14 20:20:23",
        "openRate": 50,
        "clickRate": 0
    },
    {
        "name": "单个邮箱测试",
        "id": 100019269113,
        "bucount": 0,
        "createDate": "2015-01-19 17:05:31",
        "openRate": 100,
        "clickRate": 0
    },
    {
        "name": "华邦",
        "id": 100019228117,
        "bucount": 0,
        "createDate": "2014-08-15 11:34:41",
        "openRate": 100,
        "clickRate": 0
    },
    {
        "name": "二十年",
        "id": 100019273134,
        "bucount": 4,
        "createDate": "2015-02-02 17:13:52",
        "openRate": 58.33,
        "clickRate": 0
    },
    {
        "name": "sunnytest",
        "id": 100019276115,
        "bucount": 2,
        "createDate": "2015-03-31 13:45:57",
        "openRate": 33.33,
        "clickRate": 0
    }
]

无从下手....若是能给予帮助,,万分感谢...

---

有什么难的吗？不就是前端CSS在加上些JS而已。
第一个问题。
先写出来一个的样子。然后后面一直append就行。
单选多选全选JS实现就可以了。
删除增加同样JS。
查询JS实现。
妈蛋。直接angular JS吧。我都懒的打字了。这些功能不就是angular JS 自带的膜。拿去用就行了！

---

你的问题在哪儿啊？你这个是要和后台脚本相结合吗？你这基本上就是一个小系统了。有数据库操作？

---

不知道你现在被什么问题难住了 我只能猜测着回答
1:实现页面基础样式
你需要一个js模板引擎 著名的有artTemplate handlebars

artTemplate官方例子

<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>
</script>

// dataResource 是你得到的数据
var html = template('test', dataResource);
// 部署到一个dom元素里 
document.getElementById('content').innerHTML = html;

css 部分 这个好像是bootstrap风格的 你找个css框架 就好啦

2:实现单选,多选,全选功能
到了这一步 其实单纯的jquery已经很难胜任了
不过可以做的 jsbin地址

3:实现删除,增加功能
好吧 我还建议你用vue吧 简单 易上手